客户端储存-优快云博客

本文深入探讨了客户端存储机制，包括HTTP协议的无状态特性、同源策略限制、OAuth2.0跨站登录、web存储与cookie的区别，以及它们在离线应用、安全性和隐私保护中的作用。同时介绍了如何使用localStorage和sessionStorage进行数据存储，并讨论了数据类型转换和安全性问题。

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

转载于:https://www.cnblogs.com/melovemingming/p/9709709.html