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()
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

小光~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值