WEB本地存储
本地存储（2019/1/2）
1 cookie
- 用户端保存请求信息的机制
- 分号分割的多个key-value字段
- 存储在本地的加密文件里
- 域名和路径的限制
1.1 常见参数
- name：cookie名称
- domain：cookie生效的域名
- path：cookie生效的路径
- expires：cookie过期时间
- HttpOnly：用户端不可更改
1.2 代码演示
/ 查看cookie
document.cookie
// 添加cookie
document.cookie = "name=sc;domain=happymmall.com;path=/index.html;expires=Wed, 02 Jan 2019 13:25:59 GMT"
//修改cookie
document.cookie = "name=sc2;domain=happymmall.com;path=/index.html"
// 删除cookie：把时间改为过去时间
document.cookie = "name=sc1;domain=happymmall.com;path=/index.html;expires=Wed, 02 Jan 2000 13:25:59 GMT"
2 session
- 服务端保存请求信息的机制
- sessionId通常存放在cookie
- 会话由浏览器控制，会话结束，session失效
3 localStorage
只为前端展示使用，如存储记录购物车选中了什么，不会和后端交互
- H5新特性
- 有域名限制，不存在作用域概念
- 只有key-value
- 没有过期时间
- 浏览器关闭后不消失
3.1 代码演示
// 添加localStorage
window.localStorage.setItem('name', 'sc');
// 查看localStorage
window.localStorage.getItem('name');
// 删除localStorage
window.localStorage.removeItem('name');
//清理缓存：
window.localStorage.clear()
3.2 注意事项
localStorage存储JSON时会把JSON保存为字符串，所以需要对字符串进行转换，下面是一些常用方法：
- 使用jQuery：$.parseJSON(jsonstr);
- 使用浏览器自带的转换方式（Firefox，chrome，opera，safari，ie）：JSON.parse(jsonstr);
- JSON.stringify(json);
- Javascript支持的转换方式：eval(’(’ + jsonstr + ‘)’);
- JSON官方的转换方式：json.js，stringify()和parse()
4 sessionStorage
- 和localStorage相似
- 浏览器关闭后消失
4.1 代码演示
// 添加sessionStorage
window.sessionStorage.setItem('name', 'sc');
// 查看sessionStorage
window.sessionStorage.getItem('name');
// 删除sessionStorage
window.sessionStorage.removeItem('name');
//清理缓存：
window.sessionStorage.clear()