Cookie、Session、本地存储

HTTP协议是无状态的协议，一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接，这就意味着服务器无法从连接上跟踪会话，于是出现了Cookie和Session

Cookie

Cookie实际上是一小段的文本信息，客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie，客户端会把Cookie保存起来，当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器，服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容

**会话Cookie：**若不设置过期时间，则表示这个Cookie的生命期为浏览器会话期间，关闭浏览器窗口，Cookie就消失，这种生命期为浏览器会话期的Cookie被称为会话Cookie。会话Cookie一般不存储在硬盘上而是保存在内存里
**持久Cookie：**若设置了过期时间，浏览器就会把Cookie保存到硬盘上，关闭后再次打开浏览器，这些Cookie仍然有效直到超过设定的过期时间。存储在硬盘上的Cookie可以在浏览器的不同进程间共享

**Cookie具有不可跨域名性：**就是说浏览器访问百度不会带上谷歌的cookie

Cookie几个属性：

Expires
指cookie过期的绝对时间，值为日期对象，expires默认为设置的expires的当前时间
Max-Age
- max-age是cookie的有效期，是一个相对时间，值的单位是秒，是相对于cookie创建后多少秒才过期
- max-age为正数，则表示该cookie会在max-age秒之后自动失效，写到对应的cookie文件中，无论客户关闭了浏览器还是电脑，只要还在max-age秒之前，登录网站时该cookie仍然有效
- max-age为负数，则表示该cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该cookie即失效，不会被写到cookie文件中，cookie默认的max-age值为-1
- max-age为0，则表示删除该cookie，cookie机制没有提供删除cookie的方法，因此通过设置该cookie即时失效实现删除cookie的效果，失效的Cookie会被浏览器从cookie文件或者内存中删除
domain
domain指定了哪些主机可以接受cookie，如果没有设置则为当前主机的域（不包含子域名），如果指定了domain，则一般包含子域名
path
path是指cookie存储的目录，默认为当前文件的存储目录
secure
布尔值，指定该cookie只能通过https协议进行传输
HttpOnly
使JS的Document.cookie API无法访问带有HttpOnly标记的Cookie

注意点：

如果不设置expires或者max-age这个cookie默认是session的，也就是关闭浏览器该cookie就消失了
如果max-age和expires都存在，则max-age的优先级更高
一个cookie既可以是HttpOnly的也可以有Secure属性
保存中文cookie，则需要对中文进行UTF-8编解码，即通过encodeUriComponent()和decodeUriComponent()
cookie的更新，只要将key；path；domain一致，则可以通过改变key对应的value来更新cookie的值
cookie只能更新不能删除，如果想要删除一个cookie，则通过更新设置该cookie的max-age=0即可
设置了不同域名下的cookie是不能互相访问，但是子域名是可以访问上级域名的，所以可以将cookie存在顶级域名下

前端获取cookie：

只能获取非HttpOnly标记的cookie

document.cookie

前端设置cookie：

document.cookie = 'atoken=aaa;max-age=10000;domain=test.com;path=/;secure'

原生cookie的操作比较麻烦，可以使用js-cookie库来操作

Cookie和Session的区别

作用范围不同：Cookie 保存在客户端（浏览器），而Session 保存在服务器端
存取方式的不同：Cookie 只能保存ASCII，而Session可以存任意数据类型
有效期不同：Cookie可设置为长时间保持，比如我们经常使用的默认登录功能，而Session 一般失效时间较短，由于Session依赖于名为JSESSIONID的Cookie，而 JSESSIONID的过期时间默许为–1，浏览器关闭（一次会话结束）或者Session超时都会失效
隐私策略不同：Cookie存储在客户端，比较容易遭到不法获取，而Session存储在服务端，安全性相对Cookie要好一些
存储大小不同：单个Cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie，而Session可存储数据远高于 Cookie

对服务器造成的压力不同： Cookie保管在客户端，不占用服务器资源，假如并发阅读的用户十分多，Cookie是很好的选择，而Session是保管在服务器端的，每个用户都会产生一个Session，假如并发访问的用户十分多，会产生十分多的Session，耗费大量的内存
跨域支持上的不同：Cookie支持跨域名访问，例如将domain属性设置为“.baidu.com”，则以“.baidu.com”为后缀的一切域名均能够访问该Cookie，跨域名Cookie如今被普遍用在网络中，而Session则不会支持跨域名访问，Session仅在它所在的域名内有效

sessionStorage和localStorage

以键值对的形式存储使用

存储数据：sessionStorage.setItem(key,value)或localStorage.setItem(key,value)

获取数据：sessionStorage.getItem(key)或localStorage.getItem(key)

删除数据：sessionStorage.removeItem(key)或localStorage.removeItem(key)

删除所有数据：sessionStorage.clear()或localStorage.clear()

本地存储数据格式转换

JSON.parse() 将Json字符串转换为javascript对象和 JSON.stringify() 将javascript对象转换为Json字符串

var todolist = [{id: 1,title: '我要签到',done: true
}, {id: 2,title: '我要学习',done: true
}]
todolist.push({id: 3,title: '我要运动',done: true
})
// 本地存储里只能存储字符串数据格式，存储数据需要把对象数组转换成字符串数据格式
localStorage.setItem("data", JSON.stringify(todolist))
// 获取本地存储的数据，需要把字符串数据格式转换成对象数组
console.log(JSON.parse(localStorage.getItem("data")))

cookie、sessionStorage、localStorage三者区别

存储方式不同：
- cookie始终在同源的http请求中携带，在浏览器和服务器中来回传递
- sessionStorage和localStorage仅仅在本地存储，不会与服务器通信，也不会自动把数据发送给服务器
存储大小不同
- cookie为4kb左右
- sessionStorage和localStorage可以达到5M
数据有效期不同
- cookie可以设置过期时间
- sessionStorage仅在当前会话下（同一窗口或标签页）有效，关闭页面或浏览器后被清除
- localStorage永久有效，除非手动删除
作用范围不同：
- cookie：同一个网站所有页面共享一套cookie
- sessionStorage：相同浏览器下，并且是同源窗口（协议、域名、端口一致），通过跳转的页面可以共享sessionStorage值
- localStorage：相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage值
使用方式不同：
- sessionStorage和localStorage有现成的API
- cookie需要程序员手动封装

应用场景不同：
- cookie：登录状态，记住密码，用户自定义设置，跟踪分析用户行为
- localStorage：需要长期保存的东西，比如编辑的文字草稿
- sessionStorage：购物车信息，登录的用户信息