Cookie

cookie是什么？

Cookie 是直接存储在浏览器中的一小串数据。它们是 HTTP 协议的一部分。Cookie 通常是由 Web 服务器使用响应Set-Cookie HTTP-header设置，然后添加到每个对相同域的请求中。

Cookie能干什么？

最常用的用处是身份验证： 1.HTTP-header 来设置具有唯一“会话标识符（session identifier）”的 cookie。 2.下次当请求被发送到同一个域时，浏览器会使用 Cookie HTTP-header 通过网络发送 cookie。3. 所以服务器知道是谁发起了请求。

如何访问cookie？

使用 document.cookie 属性从浏览器访问 cookie
getCookie(name)

设置cookie
setCookie(name, value, options)
cookie的删除

expires和max-age

默认情况下，如果一个 cookie 没有设置这两个参数中的任何一个，那么在关闭浏览器之后，它就会消失。此类 cookie 被称为 "session cookie”。

为了让 cookie 在浏览器关闭后仍然存在，我们可以设置 expires 或 max-age 选项中的一个。
- expires=Tue, 19 Jan 2038 03:14:07 GMT cookie 的过期时间定义了浏览器会自动清除该 cookie 的时间
- max-age=3600 它是 expires 的替代选项，指明了 cookie 的过期时间距离当前时间的秒数。如果将其设置为 0 或负数，则 cookie 会被删除
deleteCookie(name)

cookie的传输？

默认情况下，如果我们在 http://site.com 上设置了 cookie，那么该 cookie 也会出现在 https://site.com 上，反之亦然。

也就是说，cookie 是基于域的，它们不区分协议。

Cookie 应只能被通过 HTTPS 传输。使用 secure 选项，如果一个 cookie 是通过 https://site.com 设置的，那么它不会在相同域的 HTTP 环境下出现，例如 http://site.com。所以，如果一个 cookie 包含绝不应该通过未加密的 HTTP 协议发送的敏感内容，那么就应该设置 secure 标识。

LocalStorage

LocalStorage是什么？

使用localstorage可以在浏览器中存储key、value的数据，localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。
LocalStorage特点？
- 在同源的所有标签页和窗口之间共享数据。
- 数据不会过期。它在浏览器重启甚至系统重启后仍然存在。我们只需要在同一个源（域/端口/协议），URL 路径可以不同。
在所有同源的窗口之间，localStorage 数据可以共享。因此，如果我们在一个窗口中设置了数据，则在另一个窗口中也可以看到数据变化。
LocalStorage如何实现超时删除？

 <script type="text/javascript">
    //封装过期控制代码
    function set(key,value){
        var curTime = new Date().getTime();
        localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
    }
    function get(key,exp){
        var data = localStorage.getItem(key);
        var dataObj = JSON.parse(data);
        if (new Date().getTime() - dataObj.time>exp) {
            console.log('信息已过期');
            //alert("信息已过期")
        }else{
            //console.log("data="+dataObj.data);
            //console.log(JSON.parse(dataObj.data));
            var dataObjDatatoJson = JSON.parse(dataObj.data)
            return dataObjDatatoJson;
        }
    }
 </script>

LocalStorage的遍历？

像遍历数组那样遍历它们

for(let i = 0; i < localStorage.length; i++) { let key = localStorage.key(i); alert(`${key}: ${localStorage.getItem(key)}`); }

使用 for key in localStorage 循环,用 hasOwnProperty 检查来过滤掉原型中的字段

for(let key in localStorage) { if (!localStorage.hasOwnProperty(key)) { continue; // 跳过像 "setItem"，"getItem" 等这样的键 } alert(`${key}: ${localStorage.getItem(key)}`); }

sessionStorage

sessionStorage是什么？ sessionStorage 对象的使用频率比 localStorage 对象低得多。他们属性和方法是相同的，但是它有更多的限制：
sessionStorage和localstorage的区别？

sessionStorage 的数据只存在于当前浏览器标签页
数据在页面刷新后仍然保留，但在关闭/重新打开浏览器标签页后不会被保留。

和cookie的区别

不同 1.与 cookie 不同，Web 存储对象不会随每个请求被发送到服务器。因此，我们可以保存更多数据。大多数浏览器都允许保存至少 2MB 的数据（或更多），并且具有用于配置数据的设置。

2.与cookie不同。服务器无法通过 HTTP header 操纵存储对象。一切都是在 JavaScript 中完成的

3.存储绑定到源（域/协议/端口三者）。也就是说，不同协议或子域对应不同的存储对象，它们之间无法访问彼此数据。

相同两个存储对象都提供相同的方法和属性：

setItem(key, value) —— 存储键/值对。
getItem(key) —— 按照键获取值。
removeItem(key) —— 删除键及其对应的值。
clear() —— 删除所有数据。
key(index) —— 获取该索引下的键名。
length —— 存储的内容的长度。

Cookie LocalStorage sessionStorage 简明介绍

Cookie

getCookie(name)

setCookie(name, value, options)

deleteCookie(name)

LocalStorage

sessionStorage

和cookie的区别