数据存储：cookie

cookie

cookie的组成：

Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。

(1)Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌

(2)Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效

(3)Path属性：定义了Web站点上可以访问该Cookie的目录

(4)Domain属性：指定了可以访问该 Cookie 的 Web 站点或域。Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围 

(5)Secure属性：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。由于许多用户缺乏安全意识，因而仍可能连接到Pharming攻击所伪造的网站 

(6)HTTPOnly 属性 ：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头 

 

创建cookie：

document.cookie = 'age=20'；

document.cookie = 'name=luck;max-age=' + 24 * 60 * 60 ；//指定cookie有效期

 

获取cookie：

var myCookie = document.cookie；

 

        //创建cookie
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + "; " + expires+";path=/";
        }
        setCookie("name", 123,3)
​
        //获取cookie
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
            }
            return "";
        }
        //打印所有cookie
        console.log(document.cookie)
​
        //判断是否有某个cookie
        function checkCookie() {
            var user = getCookie("username");
            if (user != "") {
                alert("欢迎 " + user + " 再次访问");
            }
            else {
                user = prompt("请输入你的名字:", "");
                if (user != "" && user != null) {
                    setCookie("username", user, 30);
                }
            }
        }

 

 

过期时间

localstorage原生不支持设置过期时间，可以封装一层逻辑来实现：

　　　　 function set(key, value) {
            var curtime = new Date().getTime();//获取当前时间
            localStorage.setItem(key, JSON.stringify({ val: value, time: curtime }));//转换成json字符串序列
        }
        function get(key, exp)//exp是设置的过期时间
        {
            var val = localStorage.getItem(key);//获取存储的元素
            var dataobj = JSON.parse(val);//解析出json对象
            if (new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
            {
                console.log("expires");//提示过期
            }
            else {
                console.log("val=" + dataobj.val);
            }
        }

 

 

原文链接：https://segmentfault.com/a/1190000004121465