Cookie
Cookie的概述
- Cookie数据存储在客户端
- 单个cookie保存的数据不能超过4K，很多浏览器中一个域名最多保存50个Cookie
- 只能存储字符串
- Cookie 可设置为长时间保持
- Cookie是不能跨域的
Cookie的使用流程
Cookie会在浏览器下次向同一服务器再次发起请求时被携带，用户可以修改Cookie的数据
示例
//设置cookie（当doucment.cookie再次被赋值且键名不同时，浏览器会将该键值对添加进cookie，而不是替换掉原来的cookie）
document.cookie="username=John; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//修改cookie（将username修改为Jack）
document.cookie="username=Jack; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//删除cookie（将expires设置为以前的时间即可实现删除）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
//获取cookie（只会获取所有的键值对，不会获取有效期和路径字段）
var cookie = document.cookie;
Session
Session的概述
- Session数据存储在服务器中
- Session 可存储数据远高于 Cookie，但是当访问量过多，会占用过多的服务器资源
- 可以存储任意类型的数据
- Session 一般失效时间较短，客户端关闭（默认情况下）或者 Session 超时都会失效
Session的使用流程
- 用户第一次请求服务器时，服务器会根据用户提交的信息，创建对应的Session
- 服务器返回此Session的唯一标识信息SessionId给浏览器
- 浏览器接收到SessionId后会将该Id以及所属的域名保存进Cookie
- 当用户再次访问该服务器时，浏览器会将该Cookie发送给服务器，然后服务器会从Cookie中获取SessionId，并根据该SessionId找到对应的Session，从而获取保存在服务器中的用户的信息
示例
Session由后端进行设置
localStorage
localStorage的概述
- 保存在客户端，不会与服务器进行交互
- 一般为5MB
- 只能存储字符串
- 永久有效，除非主动清除
示例
//设置localStorage
localStorage.setItem("name", "value");
//获取localStorage
localStorage.getItem("name");
//删除localStorage
localStorage.removeItem("name");
//删除所有localStorage数据
localStorage.clear();
sessionStorage
sessionStorage的概述
- 保存在客户端，不会与服务器进行交互
- 一般为5MB
- 只能存储字符串
- 仅在当前网页会话下有效，关闭页面或浏览器后会被清除
示例
//设置sessionStorage
sessionStorage.setItem("name", "value");
//获取sessionStorage
sessionStorage.getItem("name");
//删除sessionStorage
sessionStorage.removeItem("name");
//删除所有sessionStoragesessionStorage数据
sessionStorage.clear();
