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","price":20,"name":"Mattamusta -teippi","size":"Tyhjä"},"SCI-3":{"quantity":1,"id":"SCI-3","price":19,"name":"Mohawk .vaimennusmatto 48 x 39cm"},"SCI-5":{"quantity":2,"id":"SCI-5","price":8,"name":"Car Speaker -hajuste","color":"Green Tea"},"SCI-7":{"quantity":1,"id":"SCI-7","price":50,"name":"Asennuspaketti"},"SCI-9":{"quantity":1,"id":"SCI-9","price":30,"name":"Quartz-kalvot","color":"Yellow","size":"50cm x 30cm"},"SCI-11":{"quantity":1,"id":"SCI-11","price":30,"name":"Quartz-kalvot","color":"True Blue","size":"50cm x 30cm"}}

And I want to add this line before it's closed.

"SCI-12":{"quantity":1,"id":"SCI-12","price":5,"name":"Toimituskulut"}

However, the amount of products will depend on user, and so on SCI-12 must grow with the number of items.

EDIT Actually, it doens't have to use SCI-1, it can be anything, as long as it's after the items.

EDIT2 Here's what I'm trying... But without luck.

$("#matkahuolto").click(function(){
    var value_object = '"Toimituskulut":{"quantity":1,"id":"Toimituskulut","price":5,"name":"Toimituskulut"}';
    var json_object = JSON.parse(localStorage.your_json); // convert string to object

    json_object["simpleCart_items"] = value_object; // add value

    localStorage.your_json = JSON.stringify(json_object);  // store it again.

    });

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

    json_object["simpleCart_items"] = value_object; // add value

    localStorage.your_json = JSON.stringify(json_object);  // store it again.

    });

EDIT3 A screenshot of localstorage.

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","price":20,"name":"Mattamusta -teippi","size":"Tyhjä"},"SCI-3":{"quantity":1,"id":"SCI-3","price":19,"name":"Mohawk .vaimennusmatto 48 x 39cm"},"SCI-5":{"quantity":2,"id":"SCI-5","price":8,"name":"Car Speaker -hajuste","color":"Green Tea"},"SCI-7":{"quantity":1,"id":"SCI-7","price":50,"name":"Asennuspaketti"},"SCI-9":{"quantity":1,"id":"SCI-9","price":30,"name":"Quartz-kalvot","color":"Yellow","size":"50cm x 30cm"},"SCI-11":{"quantity":1,"id":"SCI-11","price":30,"name":"Quartz-kalvot","color":"True Blue","size":"50cm x 30cm"}}

And I want to add this line before it's closed.

"SCI-12":{"quantity":1,"id":"SCI-12","price":5,"name":"Toimituskulut"}

However, the amount of products will depend on user, and so on SCI-12 must grow with the number of items.

EDIT Actually, it doens't have to use SCI-1, it can be anything, as long as it's after the items.

EDIT2 Here's what I'm trying... But without luck.

$("#matkahuolto").click(function(){
    var value_object = '"Toimituskulut":{"quantity":1,"id":"Toimituskulut","price":5,"name":"Toimituskulut"}';
    var json_object = JSON.parse(localStorage.your_json); // convert string to object

    json_object["simpleCart_items"] = value_object; // add value

    localStorage.your_json = JSON.stringify(json_object);  // store it again.

    });

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

    json_object["simpleCart_items"] = value_object; // add value

    localStorage.your_json = JSON.stringify(json_object);  // store it again.

    });

EDIT3 A screenshot of localstorage.

• javascript
• local-storage

• Oh, didn't notice that. Odd it is then, as I want it to be displayed as another product. – user1537415 Commented Sep 13, 2012 at 18:10
• I'm not sure, but I would say after. The whole local storage is a mystery for me. – user1537415 Commented Sep 13, 2012 at 18:12

2 Answers 2

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.

});

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.