本地存储(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()