本地存储-localStroage/sessionStorage存储

Posted 2020-08-11 adzd

客户端存储

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  文件系统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和存储事件是采用广播机制的，浏览器会对目前正在访问的同样的站点的所有窗口发送消息。