Web API之sessionStorage、localStorage、globalStorage

sanyang 发布于2019-08-21 10:38 / 394人阅读

摘要：介绍和都是的属性，也是对象的实例，即返回，返回也因此两者享有的属性和方法。可能添加键值对失败，原因可能用户禁止使用或者达到存储上限。存储在浏览器中的数据，如，以源进行分割。下表给出了相对同源检测的示例兼容性端移动端参考资料

1. 介绍
a) sessionStorage和localStorage都是window的属性，也是Storage对象的实例，即：window.sessionStorage instanceof Storage返回True，window.localStorage instanceof Storage 返回True,也因此两者享有Storage的属性和方法。
b) sessoinStorage存储的数据在页面会话结束时会被清空，页面会话在浏览器窗口关闭前持续存在，包含页面刷新和恢复。若新开标签或窗口将新建一个会话，再次获取sessionStorage将只限于当前会话，与先前会话的无关。localStorage存储的数据不会
c) window.globalStorage自Gecko 13 (Firefox 13)起不再支持。

2.属性
a) length(只读)：返回Storage对象存储的数据条目数。

3. 方法
a) key(index)：返回第index(从0开始)个键；若index>=length或者<0则返回null
b) getItem(key)：返回key对应的键值或null
c) setItem(key, value)：添加或者更新键值对
d) removeItem(key)：删除该键对应的键值对
e) clear()：清空所有键值对

4. 局限
a) Value只能是字符串，所以如果想存储对象的话，可以使用JSON.stringify(json)转为字符串，取出的时候使用JSON.parse(string)转回对象。
b) 不同浏览器的容量上限不同，使用该链接进行测试，http://dev-test.nemikor.com/web-storage/support-test/ 本人的谷歌版本为：Chrome 43.0.2357，测试结果如下：

5. 注意
a) 一个会话只对应一个sessionStorage（或者localStorage），即var x = window.sessionStorage和var y = window.sessionStorage时，x和y指向是同一个sessionStorage对象。另外，无法自己new一个Storage对象，即无法var s = new Storage()，不清楚。
b) 可能添加键值对失败，原因可能：用户禁止使用Storage或者达到存储上限。
c) 存储在浏览器中的数据，如localStorage，以源进行分割。每个源都拥有自己多带带的存储空间，一个源中的Javascript脚本不能对属于其它源的数据进行读写操作。

6. 知识补充
同源(same origin):如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

7. 兼容性
a) PC端

b) 移动端

8. 参考资料
a) https://w3c.github.io/webstorage/#the-sessionstorage-attribute
b) https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
c) https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
d) https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

云服务器 GPU云服务器 globalStorage Sessionstorage webrtc web api web?api??异常处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85904.html

数据存储

摘要：数据并非存储在一个安全环境中，其中包含的任何数据都可以被他人访问。的两个主要目标是提供一种在之外存储会话数据的途径提供一种存储大量可以跨会话存在的数据的机制。随着Web应用程序的出现，产生了对于能够直接在客户端上存储用户信息能力的要求。比如登录信息、偏好设定或其他数据，这个问题的第一个方案是以cookie的形式出现的，今天cookie只是在客户端存储数据的其中一种选项。 cookie...

frolc 2019-08-23 17:03 评论0 收藏0
浏览器本地存储

摘要：浏览器本地存储在较高版本的浏览器中，提供了和。单个保存的数据不能超过，很多浏览器都限制一个站点最多保存个。浏览器本地存储在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage html5中的Web Storage包括了两种存储方式：sessionStorage和loca...

oysun 2019-08-22 15:58 评论0 收藏0
JavaScript 离线应用与客户端存储——“数据存储”的注意要点

摘要：对象应该主要用于仅针对会话的小段数据的存储。如下代码限制与其它客户端数据存储方案类似，同样也有限制。最好一开始就调用方法为数据库指定一个版本号传入一个表示版本号的字符串。目前就浏览器，版本号方法已不再适用，另外，创建 Cookie 限制由于浏览器存在各种限制，最好将整个cookie长度限制在4095B以内。构成 cookie由浏览器保存的以下几块信息构成：名称： cookie的...

dreamGong 2019-08-19 17:51 评论0 收藏0
一文带你看懂cookie，面试前端不用愁

摘要：的属性在浏览器的控制台中，可以直接输入来查看。可以在浏览器的控制台中看出哪些是类型的，下带绿色对勾的即是，如图只要是类型的在控制台通过是获取不到的，也不能进行修改。当会话过期或被放弃后，服务器将终止该会话。在中，用取代了。本文由云+社区发表在前端面试中，有一个必问的问题：请你谈谈cookie和localStorage有什么区别啊？ localStorage是H5中的一种浏览器本地存...

notebin 2019-08-23 13:59 评论0 收藏0
javascript-离线应用于客户端存储

摘要：离线检测含义设备能否上网代码注和，和最新的没问题应用缓存缓存的目的是专门为网页离线设计的，当然在在线情况也会缓存机制当用户在地址输入请求的地址去请求网页时，浏览器会先本地缓存中查看是否有对应的缓存文件，如果有然后查看新鲜度就是是否过期了，如 23.1 离线检测含义：设备能否上网代码： navigator.onLine 注：IE6+和safari+5，firefox3+和ope...

gecko23 2019-08-23 15:21 评论0 收藏0