1.生命周期
Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
SessionStorage生命周期: 仅在当前会话(窗口)下有效,关闭窗口或浏览器后被清除, 不能设置过期时间
LocalStorage生命周期: 除非被清除,否则永久保存
2.容量
Cookie容量: 有大小(4KB左右)和个数(20~50)限制
SessionStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
LocalStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
3.网络请求
Cookie网络请求: 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
SessionStorage网络请求: 仅在浏览器中保存,不参与和服务器的通信
LocalStorage网络请求: 仅在浏览器中保存,不参与和服务器的通信
4.Cookie、 SessionStorage、LocalStorage应用场景
Cookie: 判断用户是否登录
LocalStorage: 购物车
sessionStorage: 表单数据
设置、获取和删除sessionStorage:
1. 设置 sessionStorage.setItem("name", "lnj"); //第一个参数是属性名,第二个参数是属性值
2.获取 let value = sessionStorage.getItem("name"); //根据属性名获取
alert(value);
3.删除 sessionStorage.removeItem("name"); //根据属性名清除
4.清空 sessionStorage.clear();