在项目中经常要存储数据，那么就会面临一个问题---到底要将数据存储到哪里？下面我将区分下 Cookie, SessionStorage, LocalStorage三者存储的区别,希望对大家有所帮助.....
浏览器存储
Cookie, SessionStorage, LocalStorage这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对！
(另外还有一种存储模式叫：session;这种级别的存储属于服务端会话级别的存储)
cookie
cookie 是什么?
cookie翻译过来是小甜饼的意思，是网景公司的前雇员 Lou Montulli 在1993年3月的发明的。
cookie是纯文本格式，不包含任何可执行的代码信息，伴随着用户请求在 Web 服务器和浏览器之间传递。
cookie本质上属于http的范畴，因为http协议本身是无状态的，服务端是没有办法区分请求来自于哪个
客户端，即便是来自于同一个客户端的多次请求 我们的服务端也是没有能力来区分的。
就是因为http协议是无状态的，所以才需要cookie去维持客户端的状态。
cookie的生成方式:
1.客户端生成:
在 JavaScript 中通过 document.cookie 属性，你可以创建、维护和删除 cookie
设置 document.cookie 属性的值并不会删除存储在页面中的所有 cookie。它只简单的创建或修改字符串中指定的 cookie
要使用 JavaScript 提取 cookie 的值，只需要从 document.cookie 中读取即可
2.服务端生成:
Web 服务器通过发送一个称为 Set-Cookie 的 HTTP消息头来创建一个 cookie
HttpOnly
为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问有HttpOnly 标记的Cookie，
cookie的缺点
安全性 ：由于cookie在HTTP中是明文传递的，其中包含的数据都可以被他人访问，可能会被篡改、盗用。
大小限制： cookie的大小限制在4KB左右，若要做大量存储显然不是理想的选择。
增加流量： cookie每次请求都会被自动添加到Request Header中，无形中增加了流量。
cookie信息越大，对服务器请求的时间也越长。因此要慎用cookie，不要在cookie中存储重要和敏感的数据。
SessionStorage本地存储，不会发送到服务器上
控制台——Application——右侧找SessionStorage，可以看到里面保存的内容
页签一关闭，就算打开的是原来的网页的地址，sessionStorage里面保存的东西也会没有了
设置sessionStorage时，是键值对的形式，值需要是将对象转为JSON字符串的形式
sessionStorage.setItem('键的名字',JSON.stringify(p))
读取sessionStorage
let res = sessionStorage.getItem('键的名字')
console.log(res)
删除sessionStorage
sessionStorage.removeItem('键的名字')
例子：
let p = {name: 'kobe'};
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
//设置sessionStorage
btn1.onclick = function () {
sessionStorage.setItem('person',JSON.stringify(p))
}
//读取sessionStorage
btn2.onclick = function () {
let res = sessionStorage.getItem('person')
console.log(res)
}
//删除sessionStorage
btn3.onclick = function () {
sessionStorage.removeItem('person')
}
localStorage都是本地存储，不会被发送到服务器
控制台——Application——右侧找localStorage，可以看到里面保存的内容
页签一关闭，打开原来的网页的地址，localStorage里面保存的东西不会没，仍然存在。
// 设置localStorage
let p = {name: 'kobe'};
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
let btn4 = document.getElementById('btn4');
//存储数据
btn1.onclick = function () {
localStorage.setItem('person', JSON.stringify(p))
}
setItem----存储的是文本字符串，所以用Json.stringify()
// 读取数据
btn2.onclick = function () {
let result = localStorage.getItem('person')
console.log(result, typeof result); // {"name":"kobe"} string
}
// 删除数据
btn3.onclick = function () {
let result = localStorage.removeItem('person')
}
// 清空
btn4.onclick = function () {
localStorage.clear();
}
跨页签通信（数据同步）
storage事件：
当Storage 对象发生变化时，即创建/更新/删除数据项时被触发
修改的页面不会触发事件，与它共享的页面会触发事件
key : 修改或删除的key值，如果调用clear(),为null
newValue : 新设置的值，如果调用clear(),为null
oldValue : 调用改变前的value值,如果调用clear(),为null
url : 触发该脚本变化的文档的url
storageArea : 当前的storage对象
// 问题： 如何修改一个页面的数据，另一个页面能够及时响应， 如：淘宝的多个页面之间如何通信
步骤：
数据同步一：（失去焦点的时候，将input中的值存到localStorage中）
document.getElementById('val').onblur = function () {
localStorage.setItem('demo',this.value)
}
数据同步二：（给window加storage事件，将一中的失去焦点时的值存入到event中，event.newValue的值就是改的值，赋值给当前的input中）
window.addEventListener('storage',function (event) {
//console.log(event)
document.getElementById('val').value = event.newValue
})
Web Storage
SessionStorage和LocalStorage都是本地存储，不会被发送到服务器上。同时空间比Cookie大很多，一般支持5-10M
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
var data = Storage.getItem('key');
该方法接受一个键名作为参数，返回键名对应的值。
Storage.setItem('key', 'value');
该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。
Storage.clear()
调用该方法会清空存储中的所有键名
storage事件：
Storage 对象发生变化时（即创建/更新/删除数据项时，Storage.clear() 方法至多触发一次该事件）会触发
在同一个页面内发生的改变不会起作用
在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)
key : 修改或删除的key值，如果调用clear(),为null
newValue : 新设置的值，如果调用clear(),为null
oldValue : 调用改变前的value值,如果调用clear(),为null
url : 触发该脚本变化的文档的url
storageArea : 当前的storage对象
备注：
1.静态资源是不会携带cookie的
2.cookie一般都是后台种的，很少让前端来直接写
3.cookie分:持久级别、session级别
4.cookie一般用于和session通信
