客户端储存
客户端储存
由于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); // 将其取出