【转】本地存储-localStroage/sessionStorage存储

原文地址：【js学习笔记-103】----本地存储-localStroage/sessionStorage存储

客户端存储

l  WEB存储

      web存储最初做为html5的一部分被定义成API形式，可是后来被剥离出来做为独立的一份标准。该标准目前还在草案阶段，但其中一部份内容已经被包括IE8在内的全部主流浏览器实现了。Web存储标准所描述的API包含localStorage对象和sessionStorage对象,这两个对象其实是持久化关联数组，是名值对的映射表。名值都是字符串。

l  cookie

        是一种早期的客户端存储机制，起初是针对服务器端脚本使用的。尽管在客户端提供了很是繁琐的js api来操做cookie，但它们难用至极，并且只适合存储少许文本数据。不只如此，任何以cookie形式存储的数据，不论服务器端是否须要，每一次http请求都会把这些数据传输到服务器端。cookie目前仍然被客户端程序员大量使用的一个重要缘由是：全部新旧浏览器都支持它，可是，随着web storage的普及，cookie终将会回归到最初的形态:做为一种被服务端脚本使用的客户端存储机制。

l  IE User Data

            IE5及以后的IE浏览器中实现了它专属的客户端存储机制-----“userData”。userData能够实现必定量的字符串数据存储，对于IE8之前的IE浏览器中，能够将其用作是web存储的替代方案。

l  离线Web应用

             HTML5标准定义了一级“离线web应用”API，用以缓存Web页面以及相关资源。它实现的是将web应用总体存储在客户端，而不只仅是存储数据。它可以让web应用“安装”在客户端，这样一来，哪怕网络不可用的时候web应用依然是可通知的。

l  web数据库

             为了可以让开发者像使用数据库那样来操做大量数据，不少主流的浏览器纷纷在其中开始集成客户端数据库的功能。safari,chrome和opera都内置了sql数据库的客户端api。遗憾的是，这类API的标准化工做以失失败。而且IE和Firefox看样子也都不打算实现这种API。目前还有一种正在标准化的数据库API，称为“索引数据库API”。调用该API返回的是一个不包含查询语言的简单数据库对象。这两种客户端数据库Api都是异步的，都使用了事件处理机制。

l  文件系统API

             以前介绍过如今主流浏览器都支持一个文件对象，用以将选择的文件经过XMLHttpRequest上传到服务端。与之相关的规范定义了一级API，用于操做一个私有的本地文件系统。在该文件系统中能够进行对方的读写操做。这些内容正在紧锣密鼓标准化当中，随着这些api被普遍地实现和支持，web应用可使用相似基于文件的存储机制。

localStorage和sessionStorage

这两个属性表明同一个Storage对象即一个持久化关联数组，数组使用字符串来索引，存储的值也都是字符串形式的。Storage对象在使用上和通常的javascript对象没什么区别：设置对象的属性为字符串值，随后浏览器会将该值存储起来。

localStorage和sessionStorage二者的区别在于存储的有效期和做用域不一样：数据能够存储多长时间以及谁拥有数据的访问权。

经过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户经过设置浏览器配置来删除，不然数据将一直保留在用户的电脑上，永不过时。localStorage的做用域是限定在文档源级别的。文档源是经过协议、主机名端口三者来肯定的。同源的文档共享一样的localStorage数据。它们能够互相读取对方的数据，甚至能够覆盖对方的数据（即便它们运行的脚本是来自同一台第三方服务器也不行）。注意：localStorage的做用域也受浏览器供应商的限制。若是使用firefox访问站点，那么下次用另外一个浏览器再次访问的时候，那么本次是没法获取上次存储的数据。

 

sessionStorage存储的数据，一旦窗口或者标签页被永久关闭了，那么全部经过sessionStorage存储的数据也都被删除了。（固然要浏览的是，现代浏览器已经具有了从新打开最近关闭的标签页随后恢复上一次浏览的会话功能，所以，这些标签页以及与之相关的sessionStorage的有效期可能会更加长些）。它的做用域也是限定在窗口中，若是同源的文档渲染在不一样的浏览标签页中，那么它们互相之间拥有的是各自的sessionStorage数据，没法共享；一个标签页中的脚本是没法读取或覆盖另外一个标签页脚本写入的数据。哪怕这两个标签渲染的是同一个页面，运行的是同一个脚本。

存储API

一般是用作javascript对象使用：经过设置属性来存储字符串值，查询该属性来读取值。除此以外，这两个对象还提供了更加正式的API。

     setItem(“名”,”值”); //设置

     getItem(“名”); //读取存储

     removeItem(“名”); //删除对应的数据 （在非IE8还可用delete操做符来删除数据）

     clear(); //清除全部存储的数据

      length属性及key()方法，传入0~length-1的数字，能够枚举全部存储数据的名字   如：

       for(vari=0;i<localStorage.length;i++){

            var name = localStorage.key(i);

            var value = localStorage.getItem(name);

       }

 

var memory =window.localStorage || (window.UserDataStorage && new UserDataStorage()) || new cookieStroage();

var userName =memory.getIem(“uername”);

 

存储事件storage

不管何时存储在localStorage或者sessionStorage的数据发生改变，浏览器都会在其余对该数据可见的窗口对象上触发存储事件（可是，在对数据进行改变的窗口对象上是不会触发的）若是浏览器有两个标签页面都打开来自同源的页面，其中一个页面在localStorage上存储了数据，那么另一个标签页就会接收到一个存储事件。sessionStorage的做用域是限制在顶层窗口的，所以对sessionStorage的改变只有当有相牵连的窗口的时候才会触发存储事件。还要注意，只有当存储数据真正发生改变的时候才会触发存储事件。像给已经存在的存储项设置一个如出一辙的值，抑或是删除一个原本就不存在的存储项都是不会触发存储事件的。

为了存储事件注册处理程序能够经过addEventListener()方法或attachEvent()方法。在绝大多数浏览器中，还可使用window对象设置onstorage属性的方式，不Firefox不支持。

与存储事件相关的事件对象有5个很是重要的属性（遗憾的是，IE8不支持它！！！）

l  key：被设置或者移除的项的名字或键名。若是调用的是clear()函数，那么该属性值为null

l  newValue:保存该项的新值；或者调用removeItem()时，该属性值为null。

l  oldValue:改变或者删除该项，保存该项原先的值；当插入一个新项的时候，该属性值为null。

l  storageArea:这个属性值就比如是目标Window对象上的localStroage属性或是sessionStorage属性

l  url:触发该存储变化脚本所在的文档的URL

注意：localStroage和存储事件是采用广播机制的，浏览器会对目前正在访问的一样的站点的全部窗口发送消息。

 

若是页面中的a标签是经过js的window.open打开的另外一个标签页，那么sessionStorage和前一个标签页的是同样的。若是是用浏览器的右键“在新的标签页中打开”那么sessionStorage和前一个标签页是不要紧的。可是不论是以何种方式打开的，以后的两个标签页之间的sessionStorage就不共享信息了。