When do items in HTML5 local storage expire

Question

For how long is data stored in localStorage  as part of DOM Storage in HTML5  available  Can I set an expiration time for the data which I put into local storage

User · Answer

From the W3C draft      User agents should expire data from the local storage areas only for security reasons or when requested to do so by the user  User agents should always avoid deleting data while a script that could access that data is running    You ll want to do your updates on your schedule using setItem key  value   that will either add or update the given key with the new data

User · Answer

Here highly recommended to use sessionStorage    it is same as localStorage but destroy when session destroyed   browser close also localStorage can share between tabs while sessionStorage can use in current tab only  but value does not change on refresh page or change the page sessionStorage is also useful to reduce network traffic against cookie      for set value use   sessionStorage setItem  key   my value         for get value use   var value   sessionStorage getItem  key      click here for view api     all ways for set are     sessionStorage key    my val     sessionStorage  key      my val     sessionStorage setItem  key   my value         all ways for get are     var value   sessionStorage key    var value   sessionStorage  key      var value   sessionStorage getItem  key

User · Answer

You can try this one  var hours   24     Reset when storage is more than 24hours var now   Date now    var setupTime   localStorage getItem  setupTime    if  setupTime    null         localStorage setItem  setupTime   now    else if  now - setupTime  gt  hours 60 60 1000        localStorage clear       localStorage setItem  setupTime   now

User · Answer

Functions function removeHtmlStorage name        localStorage removeItem name       localStorage removeItem name   time       function setHtmlStorage name  value  expires         if  expires  undefined    expires   null     var expires   3600       default  1h      var date   new Date        var schedule   Math round  date setSeconds date getSeconds   expires   1000        localStorage setItem name  value       localStorage setItem name   time   schedule      function statusHtmlStorage name         var date   new Date        var current   Math round  date 1000           Get Schedule     var stored time   localStorage getItem name   time        if  stored time  undefined    stored time   null     var stored time   0            Expired     if  stored time  lt  current                Remove         removeHtmlStorage name            return 0         else            return 1              Status var cache status   statusHtmlStorage  cache name        Has Data if  cache status    1            Get Cache     var data   localStorage getItem  cache name        alert data       Expired or Empty Cache   else           Get Data     var data    Pay in cash          alert data           Set Cache  30 seconds      if  cache    setHtmlStorage  cache name   data  30

User · Answer

While local storage does not supply an expiration mechanism  cookies do  Simply pairing a local storage key with a cookie provides an easy way to ensure that local storage can be updated with the same expiration parameters as a cookie   Example in jQuery   if     cookie  your key       localStorage getItem  your key            get your data from server  then        localStorage setItem  your key    your data           cookie  your key   1     else       var your data   localStorage getItem  your key         do stuff with your data   This example sets a cookie with the default parameter to expire when the browser is closed  Thus  when the browser is closed and re-opened  the local data store for your data gets refreshed by a server-side call   Note that this is not exactly the same as removing the local data store  it is instead updating the local data store whenever the cookie expires  However  if your main goal is to be able to store more than 4K client-side  the limitation for cookie size   this pairing of cookie and local storage will help you to accomplish a larger storage size using the same expiration parameters as a cookie

User · Answer

For the benefit of searchers    Like Fernando  I didn t want to add a load of json when the values stored were simple  I just needed to track some UI interaction and keep the data relevant  e g  how a user used an ecommerce site before checking out    This will not meet everyones criteria  but will hopefully be a quick copy paste starter for someone and save adding another lib   NOTE  This would not be good if you need to retrieve the items individually      Addition if window localStorage       localStorage setItem  myapp-    new Date   getTime     my value          Removal of all expired items if window localStorage           two mins -  1000   60   20  would be 20 mins     var expiryTime   new Date   getTime   -  1000   60   2        var deleteRows           for var i 0  i  lt  localStorage length  i             var key   localStorage key i           var partsArray   key split  -               The last value will be a timestamp         var lastRow   partsArray partsArray length - 1            if lastRow  amp  amp  parseInt lastRow   lt  expiryTime               deleteRows push key                          delete old data     for var j 0  j  lt  deleteRows length  j             localStorage removeItem deleteRows j

User · Answer

Workaround using angular and localforage   angular module  app   service  cacheService   function        return       set  function key  value  expireTimeInSeconds          return localforage setItem key            data  value          timestamp  new Date   getTime            expireTimeInMilliseconds  expireTimeInSeconds   1000                     get  function key          return localforage getItem key  then function item            if  item    new Date   getTime    gt   item timestamp   item expireTimeInMilliseconds               return null           else             return item data

User · Answer

sebarmeli s approach is the best in my opinion  but if you only want data to persist for the life of a session then sessionStorage is probably a better option      This is a global object  sessionStorage  that maintains a storage area   that s available for the duration of the page session  A page session   lasts for as long as the browser is open and survives over page   reloads and restores  Opening a page in a new tab or window will cause   a new session to be initiated    MDN  sessionStorage

User · Answer

Brynner Ferreira  has brought a good point  storing a sibling key where expiration info resides  This way  if you have a large amount of keys  or if your values are large Json objects  you don t need to parse them to access the timestamp   here follows an improved version        removeStorage  removes a key from localStorage and its sibling expiracy key     params          key  lt string gt        localStorage key to remove     returns           lt boolean gt    telling if operation succeeded      function removeStorage name        try           localStorage removeItem name           localStorage removeItem name     expiresIn          catch e            console log  removeStorage  Error removing key     key      from localStorage      JSON stringify e             return false            return true        getStorage  retrieves a key from localStorage previously set with setStorage        params          key  lt string gt    localStorage key     returns           lt string gt    value of localStorage key         null   in case of expired key or failure     function getStorage key         var now   Date now       epoch time  lets deal only with integer        set expiration for storage     var expiresIn   localStorage getItem key   expiresIn        if  expiresIn   undefined    expiresIn   null    expiresIn   0         if  expiresIn  lt  now      Expired         removeStorage key           return null        else           try               var value   localStorage getItem key               return value            catch e                console log  getStorage  Error reading key     key      from localStorage      JSON stringify e                 return null                        setStorage  writes a key into localStorage setting a expire time     params          key  lt string gt        localStorage key         value  lt string gt      localStorage value         expires  lt number gt    number of seconds from now to expire the key     returns           lt boolean gt    telling if operation succeeded     function setStorage key  value  expires         if  expires   undefined    expires   null            expires    24 60 60       default  seconds for 1 day       else           expires   Math abs expires     make sure it s positive            var now   Date now       millisecs since epoch time  lets deal only with integer     var schedule   now   expires 1000       try           localStorage setItem key  value           localStorage setItem key     expiresIn   schedule         catch e            console log  setStorage  Error setting key     key      in localStorage      JSON stringify e             return false            return true

User · Answer

You can use lscache  It handles this for you automatically  including instances where the storage size exceeds the limit  If that happens  it begins pruning items that are the closest to their specified expiration   From the readme   lscache set  Stores the value in localStorage  Expires after specified number of minutes   Arguments key  string  value  Object string  time  number  optional    This is the only real difference between the regular storage methods  Get  remove  etc work the same    If you don t need that much functionality  you can simply store a time stamp with the value  via JSON  and check it for expiry   Noteworthy  there s a good reason why local storage is left up to the user  But  things like lscache do come in handy when you need to store extremely temporary data

User · Answer

I would suggest to store timestamp in the object you store in the localStorage   var object    value   value   timestamp  new Date   getTime    localStorage setItem  key   JSON stringify object      You can parse the object  get the timestamp and compare with the current Date  and if necessary  update the value of the object   var object   JSON parse localStorage getItem  key         dateString   object timestamp      now   new Date   getTime   toString     compareTime dateString  now     to implement

User · Answer

If someone using jStorage Plugin of jQuery the it can be add expiry with setTTL function if jStorage plugin    jStorage set  myLocalVar    some value      jStorage setTTL  myLocalVar   24 60 60 1000      24 Hr

User · Answer

It s not possible to specify expiration  It s completely up to the user   https   developer mozilla org en-US docs Web API Window localStorage  Of course  it s possible that something your application stores on the client may not be there later  The user can explicitly get rid of local storage  or the browser may run into space considerations   It s good to program defensively  Generally however things remain  forever  based on some practical definition of that word   edit  mdash  obviously  your own application can actively remove stuff if it decides it s too old  That is  you can explicitly include some sort of timestamp in what you ve got saved  and then use that later to decide whether or not information should be flushed

User · Answer

If you   re familiar with the browsers locaStorage object  you know that there   s no provision for providing an expiry time  However  we can use Javascript to add a TTL  Time to live  to invalidate items in locaStorage after a certain period of time elapses  function setLocalStorageItem key  value  ttl            item  is an object which contains the original value        as well as the time when it s supposed to expire     let item             value  value          expiry  ttl   Date now     ttl   null             localStorage setItem key  JSON stringify item       function getLocalStorageItem key        let item   localStorage getItem key               if the item doesn t exist  return null     if   item  return null       item   JSON parse item          compare the expiry time of the item with the current time     if  item expiry  amp  amp  Date now    gt  item expiry               If the item is expired  delete the item from storage and return null         localStorage removeItem key            return null                 return item value

User · Answer

If anyone still looking for a quick solution and don t want dependencies like jquery etc I wrote a mini lib that add expiration to local   session   custom storage  you can find it with source here    https   github com RonenNess ExpiredStorage

User · Answer

The lifecycle is controlled by the application user   From the standard      User agents should expire data from the local storage areas only for security reasons or when requested to do so by the user  User agents should always avoid deleting data while a script that could access that data is running

[javascript] When do items in HTML5 local storage expire?

Examples related to javascript

Examples related to html

Examples related to local-storage