美文网首页
cookie/sessionStorage/localStora

cookie/sessionStorage/localStora

作者: 欢西西西 | 来源:发表于2022-06-30 16:11 被阅读0次

一、cookie

  1. cookie 限制 4KB ,会在服务端和客户端之间来回传送,安全性低;小量的需要来回传送的才适用 cookie,可能需要加密

  2. 存取删:

var demo = {
    setCookie: function (cname, cvalue, exdays) { // 设置cookie
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    },

    getCookie: function (cname) { // 获取cookie
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1);
            if (c.indexOf(name) !== -1) return c.substring(name.length, c.length);
        }
        return "";
    },

    removeCookie: function (cname) { // 删除cookie:将过期时间设置为一个过去的时间
        this.setCookie(cname, '', -1);
    }
};

二、sessionStorage

window.sessionStorage.setItem("username", "wxm"); // 存
window.sessionStotage.getItem("username"); // 取
window.sessionStotage.removeItem("uaername"); // 删

三、localStorage

和sessionStorage的存取删方式相同

四、sessionStorage 和 localStorage 区别

在于 数据存在的时间范围页面范围

  1. localStorage 可以被同源的每个窗口和标签共享;

2. sessionStorage:

  • 本页面 js 打开一个新标签页:会将本页面的 sessionStorage 传递过去,但之后互不影响

  • 本页面 HTML 里嵌套 iframe:iframe 加载的时候能拿到父当前的 sessionStorage,之后则互不影响。

  • 本页面 js 加载 iframe:当 iframe 还没设置 src 的时候,跟父是用的同一个 sessionStorage;设置 src 时会传递父的 sessionStorage,之后互不影响。

  • 本页面 js 在自身跳转页面:共享

  • sessionstorage 移动端:跳转到其他模块再回来,session 还在,退出到架构主页面,再进 业务组 就没了。

五、注意点

  1. 命名时不宜太简单,否则多项目之间可能会覆盖,互相污染。可以使用:项目名 + 当前环境 + 项目版本 + 模块id + 缓存key

  2. 要设置过期时间时,将value包装成一个对象,对象中有相应的时效时段,当下一次想获取缓存值时,判断有无超时,不超时就获取value,超时就删除这个缓存

image

相关文章

网友评论

      本文标题:cookie/sessionStorage/localStora

      本文链接:https://www.haomeiwen.com/subject/vmgfbrtx.html