• 客户端储存


    客户端储存
    由于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);	// 将其取出
    
    在无知的道路上缓步前行
  • 相关阅读:
    JS中原型对象中的constructor的作用?
    ES Module,commonjs和Typescript模块系统
    webpack中的hash、chunkhash和contenthash
    react-spring介绍(翻译)
    Typescript中的对象多可能类型推导的解决办法
    博客定制样式和脚本代码
    React和Vue对比
    CSS动画属性/重绘重排组合层/GPU加速 渲染优化相关及联系
    Object.create()探索
    await的错误处理问题,一个issue引发的ts社区的讨论
  • 原文地址:https://www.cnblogs.com/melovemingming/p/9709709.html
Copyright © 2020-2023  润新知