自定义办法设置 localStorage 过期时间

zhou_you 发布于2019-08-21 14:16 / 1999人阅读

摘要：是后台在浏览器注入一个设置了的不可读取的，由后台保存在数据库或者内存中，在中，是靠作为唯一标示来实现的，也可以设置过期时间。是的数据存储办法，也是有大小限制的，但是不可以设置过期时间。本文主要说的是如何自定义办法让实现过期时间。

introduction

在 web 开发中，我们知道 cookie、session、localStorage 都可以保存用户的数据，cookie的 domain、path 限制了 cookie 的跨域，有数量和大小的限制，可以设置有效时间。 session是后台在浏览器注入一个设置了 httponly 的不可读取的 cookie ， session data由后台保存在数据库或者内存中，在web中，session 是靠 cookie 作为唯一标示来实现的，也可以设置过期时间。 localStorage 是 H5 的数据存储办法，也是有大小限制的，但是不可以设置过期时间。本文主要说的是如何自定义办法让 localStorage 实现过期时间。

module.exports = {
    // 过期时间，默认30天
    age: 30 * 24 * 60 * 60 * 1000,
    /**
     * 设置过期时间
     * @param age
     * @returns {exports}
     */
    setAge: function (age) {
        this.age = age;
        return this;
    },
    /**
     * 设置 localStorage
     * @param key
     * @param value
     */
    set: function (key, content) {
        localStorage.removeItem(key);
        let _time = new Date().getTime();
        let _age = this.age;
        let value = {};
        value._value = content;
        
        // 加入时间
        value._time = _time;
        // 过期时间
        value._age = _time + _age;
        localStorage.setItem(key, JSON.stringify(value));
        return this;
    },
    /**
     * 判断一个 localStorage 是否过期
     * @param key
     * @returns {boolean}
     */
    isExpire: function (key) {
        
        var isExpire = true,
            value = localStorage.getItem(key),
            now = new Date().getTime();
        
        if (value) {
            value = JSON.parse(value);
            // 当前时间是否大于过期时间
            isExpire = now > value._age;
        } else {
            // 没有值也是过期
        }
        return isExpire;
    },
    /**
     * 获取某个 localStorage 值
     * @param key
     * @returns {*}
     */
    get: function (key) {
        let isExpire = this.isExpire(key);
        let value = null;
        if (isExpire) return value;
        value = localStorage.getItem(key);
        value = JSON.parse(value);
        return value._value;
    }
};

usage

 var localstorage = require("./localstorage.js");
localstorage.setAge(24*60*60*1000).set("a": "abc").set("b",{a:1,b:2})

在ios设备上无法重复setItem()

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

混合云 idc机房托管阿里云服务器自定义镜像会过期吗自定义镜像创建时间设置上传过期时间 session过期时间设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87844.html

浏览器缓存

摘要：是服务器响应消息头字段，在响应请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。注意点启用缓存之后，浏览器的缓存行为与用户的操作方式有关系，验证缓存特性开启的时候不要被假象蒙蔽。以前总是傻傻的分不清缓存和cookie，误认为cookie就是指浏览器缓存。还有 cookie localStorage sessionStorage 缓存四者的关系也没有搞明白...

Doyle 2019-08-20 14:21 评论0 收藏0
浏览器缓存

摘要：是服务器响应消息头字段，在响应请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。注意点启用缓存之后，浏览器的缓存行为与用户的操作方式有关系，验证缓存特性开启的时候不要被假象蒙蔽。以前总是傻傻的分不清缓存和cookie，误认为cookie就是指浏览器缓存。还有 cookie localStorage sessionStorage 缓存四者的关系也没有搞明白...

ashe 2019-08-06 13:21 评论0 收藏0
关于网页本地存储的一些思考

摘要：于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑，于是顺便写了个本地存储控制的库，基本都在上面了前言关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了，但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备遇见的一些问题 1.localStorage 与 sessionStorage...

陈江龙 2019-08-22 15:26 评论0 收藏0
关于网页本地存储的一些思考

摘要：于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑，于是顺便写了个本地存储控制的库，基本都在上面了前言关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了，但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备遇见的一些问题 1.localStorage 与 sessionStorage...

henry14 2019-08-01 18:42 评论0 收藏0