jQuery localStorage plugin (alpha)

javascript, , , ,

After submitting the HTML5 localStorage wrap plugin for jQuery, there comes the new version, hopefully more stable and reliable!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

(function(jQuery) {
 
   var supported = true;
   if (typeof localStorage == 'undefined' || typeof JSON == 'undefined')
      supported = false;
   else
      var ls = localStorage;
 
   this.setItem = function(key, value, lifetime) {
      if (!supported)
         return false;
 
      if (typeof lifetime == 'undefined')
         lifetime = 60000;
 
      ls.setItem(key, JSON.stringify(value));
      var time = new Date();
      ls.setItem('meta_ct_'+key, time.getTime());
      ls.setItem('meta_lt_'+key, lifetime);
   };
 
   this.getItem = function(key) {
      if (!supported)
         return false;
 
      var time = new Date();
      if (time.getTime() - ls.getItem('meta_ct_'+key) > ls.getItem('meta_lt_'+key)) {
         ls.removeItem(key);
         ls.removeItem('meta_ct_'+key);
         ls.removeItem('meta_lt_'+key);
         return false;
      }
      return JSON.parse(ls.getItem(key));
   };
 
   this.removeItem = function(key) {
      if (!supported)
         return false;
 
      ls.removeItem(key);
      ls.removeItem('meta_ct_'+key);
      ls.removeItem('meta_lt_'+key);
      return true;
   };
 
   jQuery.localStorage = this;
 
})(jQuery);
 
if (!$.localStorage.getItem('test')) {
   $.localStorage.setItem('test', ['stoimen'], 5000);
   console.log('dynamic');
} else {
   console.log('from cache');
}

Related posts:

  1. jQuery localStorage plugin
  2. Storing JavaScript objects in html5 localStorage
  3. clickoutside jQuery plugin
  4. Writing a jQuery plugin – (part 2). Sample plugin.
  5. Secure localStorage? Now that’s a good question!

8 thoughts on “jQuery localStorage plugin (alpha)”

  2. Unfortunately, it doesn’t work for me, it doesn’t keep anything – I’ve just removed the line with ‘setItem’ method after the first run and at the second, ‘getItem’ method return ‘false’. Sth is wrong maybe or it’s because of my browser – Firefox 3.6.3 / Ubuntu 9.0.4?

  3. It is possible that your browser doesn’t support this HTML5 feature. For sure there are differences between Linux versions of FF and other OS versions! However that doesn’t mean that you cannot use that code – it will be not executed in you browser and you’ll get the same effect as before installing it, but will be faster on other machines (browsers) with localStorage support.

  4. I’ll test it later on Win. And no, this version of FF supports localStorage – if I run the code exactly how it is in console I have this “dynamic”.. I check it without plugin, with native localSorage.set/getItem methods and key/value is there, but when I refresh the page getItem return false (plugin) or null (native).

  7. Nice wrapper to localStorage. I’ve taken this pretty much as is and decoupled it from jQuery – appropriate attribution included.

    It works on current versions of Firefox, Chrome, Safari, Opera on OS X (over file: and http:).

    You can find the decoupled version (localstore.js) on GitHub along with JQunit tests you can run on other platforms.
    https://github.com/johnhunter/netcache

    Thanks,
    John.

  8. For those having problems with it (can’t check as haven’t got linux) I may have an answer, if not a solution. With firefox 3.6+ if you try to use localStorage from a local file (file:/// etc) due to firefox security settings the data won’t persist.
    The page needs to be served over http:// for it to work.

Leave a Reply

Your email address will not be published. Required fields are marked *