CODEWITHSUNDEEP
javascriptpersistence
Comms
Comms

Reputation: 165

Saving a Javascript variable for later usage?

I was wondering if there were a way to save one or more javascript variables to the local machine and then call on them later?

var a = b

and then when you go back to the webpage it remembers the value that B was?

Upvotes: 4

Views: 51821

Answers (4)

Max
Max

Reputation: 1150

You could try HTML5 local storage, by use of Modernizr lib.

Example:

if (Modernizr.localstorage) {
    localStorage.setItem("bar", "1");
    var foo = localStorage.getItem("bar");
} else {
    // local storage unavailable
}

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1074475

If you mean in a web browser, there are two options:

  • Cookies

  • Web storage (in your case, specifically, "local storage" as opposed to "session storage")

Cookies are universally supported by browsers, although users can turn them off. The API to them in JavaScript is really, really bad. The cookies also get sent to your server, so they increase the size of requests to your server, but can be used both client- and server-side.

Setting a cookie is easy, but reading a cookie client-side is a pain. Look at the MDN page above for examples.

Web storage is supported by all major modern browsers (including IE8 and up). The API is much better than cookies. Web storage is purely client-side, the data is not sent to the server automatically (you can, of course, send it yourself).

Here's an example using web storage: Live Copy

<label>Value: <input type="text" id="theValue"></label>
<input type="button" id="setValue" value="Set">
<script>
(function() {
  // Use an input to show the current value and let
  // the user set a new one
  var input = document.getElementById("theValue");

  // Reading the value, which was store as "theValue"
  if (localStorage && 'theValue' in localStorage) {
    input.value = localStorage.theValue;
  }

  document.getElementById("setValue").onclick = function () {
    // Writing the value
    localStorage && (localStorage.theValue = input.value);
  };
})();
</script>

Upvotes: 15

jfriend00
jfriend00

Reputation: 707436

You have three options for storing state that you can retrieve later on in another web page on the same domain:

  1. Save the data in a cookie and then in the future web page, retrieve the data from the cookie.

  2. Save the data in local storage in the user's browser and then retrieve the data from local storage in the the future web page.

  3. Save the data server-side somehow (via post or ajax call) and then either have the server put it back into the next invocation of the page or request it from the server via an ajax call.

Local Storage is probably the best choice for a simple client-stored data value that doesn't have a server-side reason to be in a cookie. You can read about Local Storage here.

// save data value
localStorage.setItem("name", "John");

// retrieve data value
var name = localStorage.getItem("name");

Local storage has been supported in IE since IE8. If you need support in older versions of IE, you can either use cookies instead or use the local storage shim included on the MDN page I linked earlier.

Upvotes: 9

Rivasa
Rivasa

Reputation: 6740

What you are looking for is probably how to make and use Cookies.

A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

Upvotes: 6

Related Questions