Light solution for storing persistent, local data for a Javascript application

Question

I'm building an HTML5 / Javascript / jQuery application for personal use. The application needs to literally just store two numbers in order to be able to function. What is the absolute lightest way I can store two numbers between script executions and page reloads? Ideally, the solution would not require the application to run on a server.

My understanding is that Javascript can't modify local files, so wouldn't that rule out both cookies and straight filesystem local storage? — Nathan Arthur, Sep 13 '13 at 18:23
Javascript can modify cookies as long as the cookie isn't set to http only. Also, localstorage isn't file system storage. It's within the browser. — Jason P, Sep 13 '13 at 18:24
What does not modifying local files have to do with cookies and localstorage? — Kevin B, Sep 13 '13 at 18:25
and localstorage is not inside any filesystem file it on the browser — Akshay Khandelwal, Sep 13 '13 at 18:25
Sorry, guys, I'm still new to this stuff. Thanks for the clarification! — Nathan Arthur, Sep 13 '13 at 18:26
If you need not to be restricted to strings, you might want to check out JQuery's `data()` function. http://api.jquery.com/jQuery.data/ — MirroredFate, Sep 13 '13 at 18:43
@Alnitak That is true. I wasn't thinking that he stated "between script executions" he was referring to page reloads... but I suppose that would make sense. — MirroredFate, Sep 13 '13 at 18:51
@MirroredFate Sorry 'bout that. I'll edit my question to make that more clear. — Nathan Arthur, Sep 13 '13 at 18:52
@NathanArthur No worries, no worries. In that case, have a link: http://stackoverflow.com/a/11842059/771665 - or two: http://stackoverflow.com/a/2010948/771665 — MirroredFate, Sep 13 '13 at 19:07
@NathanArthur one point to remember with cookies is that they are also shared with the web server, which may disclose information that you don't want the server to have. HTML5 localStorage doesn't do that. — Alnitak, Sep 13 '13 at 19:47

Alnitak · Accepted Answer · 2013-09-13T18:37:20.597

6

localStorage would be easiest:

localStorage.setItem('a', 1);   // or localStorage.a = 1
localStorage.setItem('b', 2);

and to retrieve:

var a = +localStorage.getItem('a');  // or just a = +localStorage.a

Note that localStorage can only store strings, hence the + operator in that last line to cast the stored value back into a number. If you want to store objects, use JSON.stringify and JSON.parse.

Whether to use the direct properties or setItem style access is mostly a matter of personal choice. That said, in theory the methods are more rigorous and recommended as they avoid any possibility of confusing the built-in properties of the localStorage object with the keys that you're trying to store. Also, the methods can be shimmed on older browsers but direct property access cannot.

edited Sep 13 '13 at 18:37

answered Sep 13 '13 at 18:25

Alnitak

334,560
70
407
495

Beware localstorage not supported by IE7. Have a look here http://caniuse.com/#search=localstorage – Akshay Khandelwal Sep 13 '13 at 18:26
2

Beware, shim available on [**MDN**](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage) – adeneo Sep 13 '13 at 18:26
1

@AkshayKhandelwal the OP said HTML5, thus ruling out IE7/8 – Alnitak Sep 13 '13 at 18:27
Yes, tis true. And it'll be only for my personal use, so I can afford to worry less about compatability. But thank you for the warnings, nonetheless; and thank you, @Alnitak, for the concise and extremely helpful answer! I'll be trying this solution first. +1! – Nathan Arthur Sep 13 '13 at 18:37
Thanks again, Alnitak, for the great answer! It's the one I used, and works like a charm. Accepted. – Nathan Arthur Sep 15 '13 at 16:00

score 1 · Answer 2 · answered Sep 13 '13 at 18:24

1

Local storage is a good idea depending on your browser, here's a very good write up: http://diveintohtml5.info/storage.html

answered Sep 13 '13 at 18:24

Ahmed Nuaman

12,662
15
55
87

Ryan · Answer 3 · 2013-09-13T18:35:44.380

1

Plan old cookies will work as well. To set a cookie:

document.cookie = "MyNumber=1; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/";

To traverse the cookies:

var cookies = document.cookie.split(";"), i;
for(i = 0; i < cookies.length; i++)
{
  console.log(cookies[i]);
}

edited Sep 13 '13 at 18:35

answered Sep 13 '13 at 18:27

Ryan

14,392
8
62
102

+1 for giving a concise and useful example of cookie use! I just may go this route should I decide later that I want higher compatibility. – Nathan Arthur Sep 13 '13 at 18:37
1

@NathanArthur If you want higher compatibility, use the shims that adeneo linked to in my answer, that use cookies as an alternate storage but still preserve the `localStorage` API. – Alnitak Sep 13 '13 at 18:44
Great idea, @Alnitak. I just might do that. – Nathan Arthur Sep 13 '13 at 18:49

Light solution for storing persistent, local data for a Javascript application

3 Answers3