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()