为了账号安全,请及时绑定邮箱和手机立即绑定

客户端储存

标签:
Html5 CSS3

客户端储存
由于http协议是无状态路的协议,其无法记住用户的状态,所以就有了客户端储存用来记录用户的状态。
同样的客户端储存也是遵守同源策略,所以不同站点的页面是无法读取对方储存的数据

有oatuh2.0 用来跨站登录的,即qq互联这种登录方式。用于进行登录的很大都是用时序图进行绘制的。

储存有两种方式,一种是web储存,为h5的标准,还有一种方式为cookie,为一种早期的储存方式。离线web应用,由于微信小程序等存在,国内用的灰常少,web数据库,早期的一个h5标准,后由于某些原因被废弃。这类api标准化以失败告终。文件系统api为一组api,为h5的标准。

储存。安全。和隐私,通常cookie除了保存用户的状态,还作为一种追踪机制,用于广告商,追踪用户喜好,进行广告的投放,以及用户分析。并且所有的客户端储存都不应该用来保存密码,商业账号,以及敏感的信息,

关于devtools

调试工具中能够查看当前网站的Storage以及cookie

包括webSQL 虽然这个计划流产了,╮(╯▽╰)╭

localStorage 和 sessionStorage

在window定义域上定义了两个属性,分别为localStroage以及essionStroage
这两个属性代表同一个Storage对象,

Storage为一个api接口,Storage提供了访问域名下的全部会话储存。或者本地储存。

该对象和一般的js对象没有什么区别。
写入一个值

localStorage.username = "ming";


接着查看本地储存,可以发现已经储存了一个键值对。
为username = ming

此储存为临时储存,如果刷新页面,储存将会消失

同样的储存sessionStorage

sessionStorage.username = "ming";

这个是持久化储存,即使刷新页面也不会消失,属于持久化的储存

如果储存对象,将会直接转为字符串,所以不能储存对象

例如储存一个数字

localStorage.number = 2;
> 2
typeof localStorage.number;
> "string"
typeof localStorage.number + 0;
> "string0"
typeof parseInt(localStorage.number);
> "number"

使用parseInt将字符串转换为number

或者直接使用JSON也可,储存键值对很方便;

localStorage.data = JSON.stringify(data);	// 进行编码储存
var data = JSON.parse(localStorage.data);	// 将其取出
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消