苏南大叔在本文中讲述两个新的h5存储方式,使用上和传统的cookie存储比较类似,但是也有所不同。目前的新版本浏览器都是支持这两种h5存储方式的。分别是:localStoragesessionStorage

苏南大叔: h5数据存储机制对比,localStorage和sessionStorage - h5-localstorage
h5数据存储机制对比,localStorage和sessionStorage(图3-1)

本文测试环境:macchrome@75.0.3770.142

概述

localStoragesessionStorage,都是局限于前端的概念,正常情况下来说,和后端并不存在交互的情况。

  • localStorage类似于有效期超长的cookie
  • sessionStorage类似于没有设置有效期的cookie
  • localStoragesessionStorage的值,并不会发送到服务器端,仅仅停留在前端概念里面。

苏南大叔: h5数据存储机制对比,localStorage和sessionStorage - h5-localstorage-code
h5数据存储机制对比,localStorage和sessionStorage(图3-2)

f12中查看数据

chromef12里面查看的话,可以在application选项卡里面,查看到localStoragesessionStorage的记录。不过,这里的localStoragesessionStorage,只能查看当前域名及对应二级域名的相关记录。所以,这个localStoragesessionStorage,也是有domain的概念的。只不过没有cookie那么明显的设置domain

苏南大叔: h5数据存储机制对比,localStorage和sessionStorage - h5-localstorage-f12
h5数据存储机制对比,localStorage和sessionStorage(图3-3)

总结

本文中,苏南大叔描述的是在浏览器中,利用h5网页技术,使用localStoragesessionStorage存储数据。更多h5网页技术,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   h5

本站的忠实读者小伙伴,正在阅读下面这些文章: