关于JavaScript的Storage

最新推荐文章于 2024-10-18 11:55:51 发布

纯黑色山羊

最新推荐文章于 2024-10-18 11:55:51 发布

阅读量2.5k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_39876270/article/details/108409264

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

IE用户数据

在IE5.0中，微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多128KB数据，每个域名最多1MB数据。使用方式如下：
```
<div style = "behavior:url(#default#userData)" id = "dataStore"></div>
```
首先使用CSS在指定元素上作处理，如上userData
获取该元素的引用，并使用setAttribute绑定数据和removeAttributes来解绑数据，使用后必须调用save函数进行保存，在下一次页面载入后，可以使用load方法获取数据，三个函数说明如下
setAttribute(key,value)
removeAttribute(key)
save(命名空间名称)
load(命名空间名称)
与cookie对比
限制与cookie类似，都必须在同一域名、路径并与进行的存储脚本的同样协议
无法用户数据访问限制拓展到更多用户

web存储机制

web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端时，无须持续地将数据发回服务器。所以达到了以下两个目的：
提供一种在cookie之外存储会话数据的途径
提供一种存储大量可以跨会话存在的数据的机制
最初的Web Storage规范包含了两种对象的定义：sessionStorage和globalStorage。这两个对象在支持的浏览器中都是以window对象的形式存在的
Firefox2和3基于早期规范的内容部分实现了Web Storage，当时只实现了globalStorage，没有实现localStorage

Storage类型

Storage类型提供最大的存储空间（因浏览器而异）来存储名值对。Storage的实例与其他对象类似，有如下方法：
clear( )：删除所有值
getItem(name)：根据指定的名字name获取对应的值
key(index)：获取index位置处的值的名字
removeItem(name)：删除由name指定的名值对
setItem(name,value)：为指定name设置一个对应的值
其中，getItem( ),removeItem( )和setItem( )方法可以直接调用，也可以通过Storage对象间接调用。建议使用方法而不是属性来访问数据，以免某个值会意外重写该对象上已经存在的成员
length属性：名值对的个数，但无法判断数据大小。IE8提供了一个remainingSpace属性，用于获取还可以使用存储空间的字节数
Storage类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串
seesionStorage对象
sessionStorage对象存储于某个会话的数据，即该数据只能保持到浏览器关闭。此对象就像会话cookie，也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用
因为seesionStorage对象绑定与某个服务器会话，所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储的页面访问到，所以对多应用有限制
由于sessionStorage对象其实是Storage对象的一个实例，所以可以使用setItem( )方法或属性赋值的方法设置新的属性；
不同的浏览器写入sessionStorage略有不同
Firefox和WebKit实现同步写入，所以添加到存储空间中的数据是立刻被提交的
IE的实现为异步写入数据，所以在设置和将数据实际写入磁盘之间可能有些延迟，少量数据可以忽略此差异，对于大量数据，IE比其他浏览器更快恢复执行，因为它会跳过实际的磁盘写入过程
IE8中可以强制吧数据写入磁盘；在设置新数据之前使用begin方法，并在所有设置完成之后调用commit方法
seesionStorage主要用于针对会话的小段数据的存储
globalStorage对象
Firefox2中实现了globalStorage对象。作为最初的WebStorage规范的一部分，这个对象的目的是跨域会话存储数据，但有特定的访问限制
使用globalStorage，首先要指定哪些域可以访问数据。可以通过方括号标记使用属性来实现
```
// 保存数据
globalStorage["test.com"].name = "test";
// 获取数据
const name = globalStorage["test.com"].name;
```
以上访问的是针对域名为wrox.com的存储空间。gloablStorage对象不是Storage的实例，而具体的globalStorage["test.com"]才是。这个存储空间对于test.com及其所有子域都是可以访问的
如果将test.com改为www.test.com，那么就只有www.test.com这个子域可以访问此数据
某些浏览器允许更加宽泛的访问限制，比如只根据顶级域名进行限制或者允许全局访问
```
// 存储数据，任何人都可以访问
globalStorage('').name = "test";
// 存储数据，可以让任何以.net结尾的域名访问
globalStorage('net').name = "test";
```
虽然这些也支持，但是还是要避免使用这种可宽泛访问的数据存储，以访问出现潜在的安全问题。考虑安全问题，这些功能在未来可能会被删除或者被更严格地限制，所以不应该依赖于这类功能。
对于globalStorage控件的访问，是依据发起请求的页面的域名、协议和端口来限制的（如Ajax请求的同源策略）
globalStorage的每个属性都是Storage的实例
如果不事先确定域名，可以使用私用的location.host作为属性名
如果不使用removeItem( )或者delete删除，或者用户未清除浏览器缓存，存储在globalStorage属性中的数据会一直保留在磁盘上。使得globalStorage非常适合在客户端存储文档或长期保持用户偏好设置
localStorage对象
localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何访问规则；规则事先就设定好了（如Ajax的同源策略）
由于localStorage是Storage的实例，所以可以像使用sessionStorage一样使用它
存储在localStorage中的数据和存储在Storage中的数据一样，都遵循相同的规则；数据保留到通过JavaScript删除或者是用户清除浏览器缓存

storage事件

对stoarge对象进行任何修改，都会在文档上触发storage事件。此事件的event对象有以下属性

domain：发生变化的存储空间域名
key：设置或删除的键名
newValue：如果是设置值，则是新值；如果是删除键，则是null
oldValue：键被改变之前的值
无论对sessionStorage、globalStorage还是localStorage进行操作，都会触发storage事件，但不做区分

限制

与其他客户端数据存储方案类似，Web Storage同样有限制。这些限制因浏览器而异。一般来说对存储空间大小的限制都是以每个来源（协议、域、端口）为单位的。即每个来源都有固定大小的空间用于保存自己的数据
对于localStoarge而言，大多数桌面浏览器会设置每个来源5MB的限制。Chrome和Safari对每个来源的现在是2.5MB。而IOS版Safari和Android版本WebKit都有限制，也是2.5MB