store array into localstorage instead of replace

Question

I'm using local storage as below like

  var post = {
    title: 'abc',
    price: 'USD5'
  };

window.localStorage['book'] = JSON.stringify(post);

I want to create nested json in my localstorage, if above code is within a click event for the user to click save, it will delete the old data and replace it. How to push new value as an array object?

Answer 1

Use an actual array, e.g. on page load:

var posts = JSON.parse(localStorage['book'] || "[]");

Then as you're working with it, add to the array in memory:

posts.push({
   title: 'abc',
   price: 'USD5'
});

Any time you want to save the value back to local storage:

localStorage['book'] = JSON.stringify(posts);

---

Here's a complete functional example (live copy; sadly, Stack Snippets disallow local storage):

HTML:

<div>
  <label>
    Name:
    <input type="text" id="txt-name">
  </label>
</div>
<div>
  <label>
    Price:
    <input type="text" id="txt-price">
  </label>
</div>
<div>
  <input type="button" value="Add" id="btn-add">
</div>
<div id="list"></div>

JavaScript (must be after the HTML in the document):

(function() {
  var nameField = document.getElementById("txt-name"),
    priceField = document.getElementById("txt-price");

  // On page load, get the current set or a blank array
  var list = JSON.parse(localStorage.getItem("list") || "[]");

  // Show the entries
  list.forEach(showItem);

  // "Add" button handler
  document.getElementById("btn-add").addEventListener(
    "click",
    function() {
      // Get the name and price
      var item = {
        name: nameField.value,
        price: priceField.value
      };

      // Add to the list
      list.push(item);

      // Display it
      showItem(item);

      // Update local storage
      localStorage.setItem("list", JSON.stringify(list));
    },
    false
  );

  // Function for showing an item
  function showItem(item) {
    var div = document.createElement('div');
    div.innerHTML =
      "Name: " + escapeHTML(item.name) +
      ", price: " + escapeHTML(item.price);
    document.getElementById("list").appendChild(div);
  }

  // Function for escaping HTML in the string
  function escapeHTML(str) {
    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;");
  }
})();

---

Side note: If there's any chance at all you might have to support your code on older browsers that don't have local storage at some point, you can give yourself the option of using a polyfill that writes to cookies if you use the more verbose .getItem(...)/.setItem(..., ...) API, as they can be polyfilled whereas accessing via [] as in the above can't be.

Answer 2

localStorage supports strings. You should use JSONs stringify() and parse() methods.

If I understood the question and what you are looking for is storing an array and not just an object with properties.

As scunliffe commented, What you can do in order to add items to an array which is stored in the local storage is: Generating the array with first object:

var array = []; 
array[0] = //Whatever; 
localStorage["array"] = JSON.stringify(array);

Adding items to the array:

//Adding new object 
var storedArray = JSON.parse(localStorage["array"]);
sotreadArray.push(//Whatever); 
localStorage["array"] = JSON.stringify(array);

This way you store an JSON object representing an array.

As mentioned in this post You can also extend the default storage-objects to handle arrays and objects by:

Storage.prototype.setObj = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key))
}