localStorage
-
常用于长期登录（判断是否已登录）
-
生命周期是永久（除非用户主动 removeItem）
-
相同浏览器的不同页面间可以共享
-
webstorage（本地存储），存储在客户端（即浏览器），不参与和服务器的通信
-
存放数据约：5MB
-
string only
-
不同浏览器无法共享
-
不会担心截获，存在伪造问题
sessionStorage
-
敏感账号一次性登录
-
仅在当前会话下有效，关闭页面或浏览器后被清除
-
不同页面或标签页间无法共享
-
页面及标签页仅指顶级窗口
-
可以共享：一个标签页包含多个iframe标签且它们属于同源页面
-
-
webstorage（本地存储），存储在客户端（即浏览器），不参与和服务器的通信
-
存放数据约：5MB
-
string only
-
不会担心截获，存在伪造问题
HTTP Cookie
-
服务器发送到用户浏览器并保存在本地的一小块数据
- 主要包括：名字、值、过期时间、路径和域
-
保存在客户端
-
保存的是字符串
-
作用
-
会话状态管理
-
如用户登录状态、购物车、游戏分数或其他需要记录的信息
-
-
个性化设置
- 如用户自定义设置、主题和其他设置
-
浏览器行为跟踪
-
-
服务器收到 HTTP 请求
-
=> 服务器在响应标头里面添加一个或多个
Set-Cookie选项 -
=> 浏览器收到响应后会保存下 Cookie
-
=> 将其放在 HTTP Cookie 标头内，向同一服务器发出请求时一起发送
-
-
存储形式：
Set-Cookie: <cookie-name>=<cookie-value> -
4kb，不超过 20 个
-
失效时间
-
默认是浏览器关闭失效
-
在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
-
-
设置安全标志后只有SSL连接的时候才发送到服务器
-
设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的
-
所有同源窗口中都是共享的
WebStorage
方法
-
setItem (key, value) —— 保存数据，以键值对的方式储存信息
-
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值
-
removeItem (key) —— 删除单个数据，根据键值移除对应的信息
-
clear () —— 删除所有的数据
-
key (index) —— 获取某个索引的key
作用
- 在cookie之外存储会话数据的路径
- 存储大量可以跨会话存在的数据的机制
优点
* 减少不必要的数据请求
* 临时存储：从本地读数据比通过网络从服务器上获得数据快得多
补充
-
复杂对象处理：ECMAScript - JSON对象 - stringify、parse
-
页面中：js对象仅在当前页面有效
- 刷新页面或转到另一页面这样的重新加载页面时，数据就消失
-
支持事件通知机制：可以将数据更新的通知发送给监听者
session对象
-
保存在服务器
-
保存的是对象
-
可保存在用户浏览这个网站时所要求保存的任何数据
-
session数据放在服务器上
-
更安全：登录信息等重要信息的存放
-
当访问增多，会比较占用你服务器的性能
-
不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到
