美文网首页
cookie localstorage

cookie localstorage

作者: 真是个非常帅气的昵称呢 | 来源:发表于2019-07-12 17:17 被阅读0次

    需求是这样的:当你首次登录时,会出现一个引导,点击后消失。一般都会想到记录在本地。
    刚开始,我是用LocalStorage,但是问题来了。当用户从www.a.com跳到home.a.com时,虽然在www.a.com中已经关闭了引导,但是跳到home.a.com时,又会出现该引导。
    于是,最后采用cookie.

    localStorage

    localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

    sessionStorage

    sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。

    两者区别:作用于不同

    不同浏览器无法共享localStorage或sessionStorage中的信息。
    相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),
    但是不同页面或标签页间无法共享sessionStorage的信息。
    这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

    得出的结论就是:cookie在顶级域名相同时,是可以共享cookie的。而localstorage必须一级、二级域名都相同。

    setcookie封装

    setCookie: function(cookieName, cookieValue, seconds, path, domain, secure) {
                var expires = null;
                if (seconds != -1) {
                    expires = new Date();
                    expires.setTime(expires.getTime() + seconds);
                }
                document.cookie = [
                    escape(cookieName),
                    '=',
                    escape(cookieValue),
                    (expires ? '; expires=' + expires.toGMTString() : ''),
                    (path ? '; path=' + path : '/'),
                    (domain ? '; domain=' + domain : ''),
                    (secure ? '; secure' : '')
                ].join("");
            }
    

    getcookie封装

     getCookie: function(name) {
              var cookie_start = document.cookie.indexOf(name);
                var cookie_end = document.cookie.indexOf(";", cookie_start);
                return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length)));
            },
    

    相关文章

      网友评论

          本文标题:cookie localstorage

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