关于JavaScript的Storage

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