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

你可能感兴趣的:(web前端)