苏南大叔在本文中讲述两个新的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)

永久本地存储localStorage

添加及修改:

localStorage.setItem("name","value")
localStorage.getItem("name")

删除及清空:

localStorage.removeItem("name")
localStorage.clear()
  • 注意:只有removeItem才能彻底删除localStorage的某条记录。而clear()是清除所有数据。

key操作:

localStorage.key(0)
localStorage.key.length

数据循环:

for (var i=0;i<localStorage.key.length;i++){
  var key=localStorage.key(i);
  var value=localStorage.getItem(key)
  console.log(key+"=>"+value)
}

临时存储sessionStorage

添加及修改:

sessionStorage.setItem("name","value")
sessionStorage.getItem("name")

删除及清空:

sessionStorage.removeItem("name")
sessionStorage.clear()
  • 注意:除了removeItem能彻底删除sessionStorage的某条记录外,另外,完全关闭整个浏览器(不是当前tab),也可以彻底销毁sessionStorage的所有记录。

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

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