Modify localstorage?

Question

I\'m using simplecartjs to power an online store. It stores it\'s data in local storage, which looks like this:

{\"SCI-1\":{\"quantity\":1,\"id\":\"SCI-1\",\         


        

Answer 1

LocalStorage stores all data as as string of text. So it would be easiest to modify it before it has been converted to a string of text.

Otherwise you need to pull the json string into an object, add the property, convert it back to a string and store it.

Sample Code

var json_object = JSON.parse(localStorage.your_json); // convert string to object
json_object[key] = value_object; // add value
localStorage.your_json = JSON.stringify(json_object);  // store it again.

Note

This is what indexedDB is for.
One might want to consider this as a substitute.

Answer 2

Or you could let http://rhaboo.org do the heavy lifting and write:

var store = Rhaboo.persistent("My Cart");
if (store.cart === undefined) 
  store.write('cart', []);
//otherwise it must have data in from before

$("#matkahuolto").click(function(){
  store.cart.push ({
      "quantity":1,  "id":"Toimituskulut",
      "price":5,     "name":"Toimituskulut"  });
});

$("#show").click(function(){ console.log( 
    store.cart.map(function (i) {
      return i.quantity + " " + i.id + "s at " + i.price + " each"
    }).join(' plus '); );  
 });

BTW, I wrote rhaboo.

Answer 3

The first thing you need to understand is how items are stored in localStorage, which is basically like a hashmap/dictionary in that the items are stored in key value pairs.

For example to store a string localStorage you would do something like

localStorage["myKey"] = "some value";

To retrieve the value you would just to the reverse

var myValue = localStorage["myKey"];

The next thing to realize is that you can in fact only store strings in localStorage, so if you want to store a object you need to first convert it to a string representation. This is usually done by converting the object to JSON which is a compact notation used to represent an object as a string. To convert an object to JSON you just use the JSON.stringify method, and to parse an item you use the JSON.parse method

For example to convert an object to JSON

var someObject = {id: 1, name: 'Test'};

var jsonSomeObject = JSON.stringify(someObject); 
// jsonSomeObject looks like "{"id":1,"name":"test"}"

And to read an object from JSON

someObject = JSON.parse(jsonSomeObject);

So now in your case assuming that your object contains the appropriate data all you need to do is stringify your object and add it to localStorage using some key,

var jsonData = JSON.stringify({"SCI-12":{"quantity":1,"id":"SCI-12","price":5,"name":"Toimituskulut"}});

localStorage["aKey"] = jsonData;

and when you want to access this data later (presumably after coming back to the page)

var mySCI = JSON.parse(localStorage["aKey"])

If you are trying to update a specific entry in localStorage then you would just read it in and then overwrite it, for example

var mySCI = JSON.parse(localStorage["aKey"]);
mySCI.SCI-12.quantity = 2;
localStorage["aKey"] = JSON.stringify(mySCI);

Keep in mind that while most browsers have built in support for JSON some older ones don't, if this is an issue you can include Douglass Crockfords JSON-js script to provide support.

Edit:

Based on the screenshot you just posted, you can see that the key under which the values are stored in localStorage is in fact simpleCart_items (and not your_json which are using in your code), and that the object that is being stored has a object stored under the key "SCI-1) (and probably others under "SCI's"). So what you would need to do is something like the following

 $("#matkahuolto").click(function(){
    var value_object = {quantity: 1, id: 1, name: "someName"} ; 
    var jsonObject = JSON.parse(localStorage["simpleCart_items"]);
    json_object["SCI_1"] = value_object; // add value

 localStorage["simpleCart_items"] = JSON.stringify(json_object);  // store it again.

});

$("#posti").click(function(){
 // convert string to object
 var json_object = JSON.parse(localStorage["simpleCart_items"]); 

json_object["SCI-1"] = value_object; // add value

 localStorage["simpleCart_items"] = JSON.stringify(json_object);  // store it again.

});