HTML5-Web Storage APIs的简述

百变鹏仔 2个月前 (10-18) #H5教程

文章标签 Web

1.概述
web storage是一种在客户端存储数据的方法。比起cookie，web storage更加安全，能够存储更多对象，而不仅仅是字符串；web storage能够存储更大的数据，而不是像只能够存储几kb数据的cookie；web storage还可以减少数据在客户端与服务器间的转换，减少带宽。
web storage的核心是是window对象的两个子对象sessionstorage和localstorage。数据以键值对的形式通过这两个对象存储，这两个对象都实现了storage接口，拥有名称相同的属性和方法，用法也相同。不同之处是二者的存储时间和共享范围。
sessionstorage数据存储时间依赖于存储它的浏览器窗口或选项卡存在的时间，共享范围也是只在产生它的浏览器窗口或选项卡内。
localstorage数据存储时间要超过浏览器的打开时间，除非通过手动或者代码删除，其共享范围是同源（origin）网站的页面间。
许多浏览器不支持sessionstorage访问本地文件系统，因此要通过web服务器使用。
web storage的规范允许存储任何类型数据，但在各浏览器实现上多数值允许存储字符串文本数据，但可以使用web storage结合json技术存储非文本数据。
更高级的数据存储方法是web sql database，用于基于索引的数据库存储，并具有sql查询语言sqlite。web sql database目前仅被safari，chrome和opera支持。最终的规范很可能不采用这种方式。另外一种方法是indexeddb，仅firefox 4以上版本支持。

2.浏览器支持检测

 function checkStorageSupport() {   //sessionStorage   if (window.sessionStorage) {     alert(&#39;This browser supports sessionStorage&#39;);   } else {     alert(&#39;This browser does NOT support sessionStorage&#39;);   }   //localStorage   if (window.localStorage) {     alert(&#39;This browser supports localStorage&#39;);   } else {     alert(&#39;This browser does NOT support localStorage&#39;);   } }

3.Storage接口

  interface Storage {      //同源键值对的数目     readonly attribute unsigned long length;      //通过索引获取键，索引从0开始     getter DOMString key(in unsigned long index);      //通过键获取值，键若不存在，值将返回null     getter any getItem(in DOMString key);      //存储键值对，若已存在同名键，则值将被覆盖。若用户关闭了浏览器存储或是已超     //过允许存储的最大值，都将产生QUOTA_EXCEEDED_ERR错误。     setter creator void setItem(in DOMString key, in any data);      //通过键删除值，不存在则什么也不做     deleter void removeItem(in DOMString key);      //删除storage中所有键值对，若为空则什么也不做     void clear();    };

4.读取和存储数据

  //---------------方式一--------------   //存储数据   window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);    //读取数据   alert(window.sessionStorage.getItem(‘myFirstKey’));    //---------------方式二--------------   //存储数据   window.sessionStorage.myFirstKey = ‘myFirstValue’;   //读取数据   alert(window.sessionStorage.myFirstKey);    //---------------方式三--------------   var varKey = sessionStorage.key(index);   window.sessionStorage[varKey] = newValue;

5.存储事件
Web Storage与其它页面、浏览器窗口或选项卡、Web Worker间的通信可以通过存储事件来进行。同源的对象都可以监听storage事件。添加storage事件监听方法如下：

立即学习“前端免费学习笔记（深入）”；

  window.addEventListener("storage", displayStorageEvent, true);

6.StorageEvent接口
storage事件对象实现了StorageEvent接口，该接口的声明如下：

 interface StorageEvent : Event {       readonly attribute DOMString key;       readonly attribute any oldValue;       readonly attribute any newValue;       readonly attribute DOMString url;       //该方法提供了一个对发生storage事件对象的引用，这个对象可以是      //sessionStorage或localStorage      readonly attribute Storage storageArea;   };

6.处理最大配额
多数浏览器所允许的Web Storage不超过5MB，为了防止存储数据时产生超出配额的限制，可以使用捕获QUOTA_EXCEEDED_ERR异常的方法来处理，例如：

try   {      sessionStorage["name"] = "Tabatha";   }   catch (exception)   {      if (exception == QUOTA_EXCEEDED_ERR)      {          // we should tell the user their quota has been exceeded.       }   }

文章推荐

HTML5-Web Storage APIs的简述

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集