本地存缓存

cookie

http：无状态请求协议

1. 用户端保存请求信息的机制
2. 分号分隔的多个key-value字段
3. 存储在本地的加密文件里
4. 域名和路径限制

cookie字段

name: cookie名称
domain: cookie生效的域名
path: cookie生效的路径
expires: cookie过期时间
HttpOnly: 用户端不可更改

// 查看cookie
document.cookie

// 添加cookie
document.cookie = 'name=Rosen;domain=happymmall.com;path=/index.html;expires=Sat, 06 Jan 2018 13:38:45 GMT'

// 修改cookie
document.cookie = 'name=Rosen1;domain=happymmall.com;path=/index.html;'

// 删除cookie
document.cookie = 'name=Rosen1;domain=happymmall.com;path=/index.html;expires=Sat, 06 Jan 2017 13:38:45 GMT'

session

1. 服务端保存请求信息的机制
2. sessionId通常放在cookie里
3. 会话由浏览器控制，会话结束，session失效

document.cookie

localStorage

1. H5新特性
2. 有域名限制，不存在作用域概念
3. 只有key-value
4. 没有过期时间
5. 浏览器关闭后不消失

// 添加localStorage
window.localStorage.setItem('name', 'Rosen');

// 查看localStorage
window.localStorage.getItem('name');

// 删除localStorage
window.localStorage.removeItem('name');

sessionStorage

1. 和localStorage相似
2. 浏览器关闭后消失

// 添加sessionStorage
window.sessionStorage.setItem('name', 'Rosen');

// 查看sessionStorage
window.sessionStorage.getItem('name');

// 删除sessionStorage
window.sessionStorage.removeItem('name');

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。