localStorage(作为 HTML5 中 DOM 存储的一部分)中存储的数据可以使用多长时间?我可以为本地存储中的数据设置过期时间吗?

有帮助吗?

解决方案

这是不可能指定到期。这完全取决于给用户。

https://developer.mozilla.org/en-美国/文档/网络/ API /窗/ localStorage的

当然,也有可能是客户端上的东西你的应用程序商店可能不会有以后。用户可以明确地摆脱本地存储,或者浏览器可能会遇到空间的考虑。这是很好的防守计划。然而一般的事情保持“永远”基于这个词的一些实用的定义。

修改的 - 显然,你自己的应用程序可以有效消除了东西,如果它决定它太旧。也就是说,你可以明确地包括在你有什么保存某种形式的时间戳,然后用,后来决定信息是否应被刷新。

其他提示

我会建议在对象的你在localStorage的存储

商店时间戳
var object = {value: "value", timestamp: new Date().getTime()}
localStorage.setItem("key", JSON.stringify(object));

您可以解析的对象,得到时间戳和与当前的日期进行比较,并在必要时更新对象的值。

var object = JSON.parse(localStorage.getItem("key")),
    dateString = object.timestamp,
    now = new Date().getTime().toString();

compareTime(dateString, now); //to implement

可以使用 lscache 。它会自动为您处理此,包括在存储大小超过限制的情况。如果出现这种情况时,它开始修剪是最接近其指定的到期的项目。

readme

lscache.set

Stores the value in localStorage. Expires after specified number of minutes.

Arguments
key (string)
value (Object|string)
time (number: optional)

这是常规存储方法之间的唯一真正的区别。获取,删除等工作一样。

如果你并不需要那么多的功能,你可以简单地存储时间戳与价值(通过JSON),检查其是否过期。

值得注意的是,有一个很好的理由的本地存储空间留给用户。但是,像lscache就派上用场,当你需要存储极其临时数据。

连纳费雷拉,带来了良好的点:存储同级键,其中过期信息驻留。这样一来,如果您有大量的按键,或者如果你的价值观是大JSON对象后,您不必分析它们访问的时间戳。

这里如下的改进版本:

 /*  removeStorage: removes a key from localStorage and its sibling expiracy key
    params:
        key <string>     : localStorage key to remove
    returns:
        <boolean> : 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 <string> : localStorage key
    returns:
        <string> : 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 < 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 <string>     : localStorage key
        value <string>   : localStorage value
        expires <number> : number of seconds from now to expire the key
    returns:
        <boolean> : 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;
}

虽然本地存储不提供到期机构,饼干做。简单地配对带有cookie的本地存储密钥提供一个简单的方法,以确保本地存储可以用相同的到期参数作为cookie被更新。

实施例中的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

此示例将具有默认参数当浏览器被关闭以到期的cookie。因此,当浏览器被关闭并重新打开,your_data本地数据存储器得到由一个服务器侧呼叫刷新。

请注意,这是不完全一样的除去本地数据存储器,它不是更新本地数据存储每当cookie过期。但是,如果你的主要目标是能够存储超过4K客户端(限制对cookie的大小),这个配对饼干和本地存储将帮助您在使用相同的到期参数作为cookie实现更大的存储容量

这里强烈推荐使用 会话存储

  • 它与 本地存储 但当会话销毁/浏览器关闭时销毁
  • sessionStorage 对于减少针对 cookie 的网络流量也很有用

用于设定值使用

sessionStorage.setItem("key","my value");

为了获得价值使用

var value = sessionStorage.getItem("key");

点击这里查看api

set 的所有方法都是

  sessionStorage.key = "my val";
  sessionStorage["key"] = "my val";
  sessionStorage.setItem("key","my value");

所有获取方式都是

  var value = sessionStorage.key;
  var value = sessionStorage["key"];
  var value = sessionStorage.getItem("key");

在生命周期由应用/用户控制。

标准

  

用户端应该只对用户请求这样做安全原因或到期时,从本地存储区的数据。用户代理应该始终避免可能访问该数据的脚本运行时删除数据。

从W3C草案:

  

用户端应该只对用户请求这样做安全原因或到期时,从本地存储区的数据。用户代理应该始终避免可能访问该数据的脚本运行时删除数据。

您会想要做关于使用setItem(键,值)您的日程安排您的更新;将添加或更新为新数据的给定的键。

// 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 < 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); }

}

如果有人使用jQuery的jStorage插件的也可以是附加届满与setTTL功能如果jStorage插件

$.jStorage.set('myLocalVar', "some value");
$.jStorage.setTTL("myLocalVar", 24*60*60*1000); // 24 Hr.

如果有人还在寻找一个快速的解决方案,不希望像jQuery等我写依赖一个小型的lib是添加过期本地/会话/自定义存储,您可以用源在这里找到它:

https://github.com/RonenNess/ExpiredStorage

解决方法使用角度和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() > (item.timestamp + item.expireTimeInMilliseconds)) {
          return null
        } else {
          return item.data
        }
      })
    }
  }

})

@ sebarmeli的做法在我看来是最好的,但如果你只是想数据持续会话的生活,那么sessionStorage可能是一个更好的选择:

  

这是一个全局对象(sessionStorage),它的存储区域   这是可用于网页会话的持续时间。一个页面会话   持续只要浏览器是开放的,在页面幸存   重载和恢复。在新标签或窗口中打开一个页面就会造成   要发起新的会话。

MDN:的sessionStorage

有关搜索的益处:

像费尔南多,我不想添加JSON的载荷时存储的值是简单的。我只需要跟踪一些UI相互作用,并保持该数据相关(用户检出之前例如如何应用电子商务网站)。

这将无法满足每个人的标准,但将有希望成为一个快速复制粘贴+某人和保存添加另一个lib中首发出场。

请注意:这不会是好,如果你需要分别检索项

// 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 < 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 && parseInt(lastRow) < expiryTime){
            deleteRows.push(key);
        }
    }
    // delete old data
    for(var j=0; j < deleteRows.length; j++){
        localStorage.removeItem(deleteRows[j]);
    }
}

您可以尝试这一个。

var hours = 24; // Reset when storage is more than 24hours
var now = new Date().getTime();
var setupTime = localStorage.getItem('setupTime');
if (setupTime == null) {
     localStorage.setItem('setupTime', now)
} else {
    if(now-setupTime > hours*60*60*1000) {
         localStorage.clear()
         localStorage.setItem('setupTime', now);
    }
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top