Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Hi I am a beginner web developer and am trying to build the interface of a simple e-commerce site as a personal project.The site has multiple pages with checkboxes. When someone checks an element, it retrieves the price of the element and stores it in a variable. But when I go to the next page and click on new checkboxes products the variable automaticly resets to its original state.How can I save the value of that variable in Javascript?

This is the code I've writen using sessionStorage but it still dosen't work when I move to next page the value is reseted.

How can I write this code so that it dosen't reset on each page change. All pages on my website use the same script.

$(document).ready(function () {
    var total = 0;

    $('input.check').click(function () {
        if ($(this).attr('checked')) {
            var check = parseInt($(this).parent().children('span').text().substr(1, 3));
            total += check;
            sessionStorage.var_name = 0 + total;
            alert(sessionStorage.var_name);

        } else {
            var uncheck = parseInt($(this).parent().children('span').text().substr(1, 3));
            total -= uncheck;
        }
    })
})
share|improve this question

closed as off topic by Jalayn, Kilian Foth, Jim G., ChrisF May 17 '13 at 21:27

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Your question was on-topic when you were asking about the different methods for dealing with client-side state. But now it seems you are interested in asking about a specific issue related to your code, which is definitely off-topic here. Perhaps you can find an answer on Stack Overflow instead? –  Jeremy Heiler Jun 2 '12 at 20:27
    
have a look at this tutorial, covers your need: theitninja.co.uk/javascript-f14/html5-local-storage-t141.html –  Darknight Jun 2 '12 at 20:35

2 Answers 2

up vote 4 down vote accepted

You have three basic options.

  1. Send the data to the server and save it with the user's HTTP session. Then when you load a page that needs the data, you just pull it out and use it. This probably is not ideal for your case, but is still necessary for certain things. This is also the safest solution as it is unlikely a user can turn off any functionality in there browser to prevent it. If a full page load is too much, you can send that data with a asynchronous request (Ajax), but this does require that JavaScript is enabled. Although I don't think that is much of a problem anymore for general websites.

  2. Save the data in a cookie. Cookies are sent back and forth with each HTTP request and response. There's a limit to how big your cookies can be, so if you are sending a lot of data, you might not want to do this. If you do, you'll want to make sure you delete the cookies when you're done with them so they don't bloat your requests and responses.

  3. Take advantage of the client side data storage APIs in the various browsers. I am not up to speed on of this has been standardized and/or fully implemented by all major browsers yet, but the last time I checked there were libraries that abstracted away the various details. I know jQuery does this, but I'm sure there are others.

share|improve this answer

I have personally used jStorage (www.jstorage.info) in a client project. The API is simple, cross-browser and uses HTML5 local storage where available. (It uses userData behavior in decrepit versions of IE.) With local storage, you can unplug your PC with no data loss, so it will certainly persist your data across page loads.

Sample syntax:

var subTotal = $.jStorage.get( CACHEsubTotal );
subTotal += currentlySelectedItem;
$.jStorage.set( CACHEsubTotal, subTotal );
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.