A brief description of HTML5-Web Storage APIs

1. Overview
Web Storage is a method of storing data on the client side. Compared with Cookie, Web Storage is more secure and can store more objects, not just strings; Web Storage can store Larger data, rather than cookies that can only store a few KB of data; Web Storage can also reduce the conversion of data between the client and the server, reducing bandwidth.
The core of Web Storage is the two sub-objects of the window object, sessionStorage and localStorage. Data is stored in the form of key-value pairs through these two objects. Both objects implement storageinterface, have properties and methods with the same names, and have the same usage. The difference is the storage time and sharing scope of the two.
The storage time of sessionStorage data depends on the existence time of the browser window or tab where it is stored, and the sharing scope is only within the browser window or tab where it was generated.
The storage time of localStorage data exceeds the opening time of the browser. Unless deleted manually or through code, its sharing scope is between pages of the same origin website.
Many browsers do not support sessionStorage access to the local file system , so it must be used through the web server.
The specifications of Web Storage allow the storage of any type of data, but most browser implementations allow the storage of string text data, but you can use Web Storage combined with JSON technology to store non-text data.
A more advanced data storage method is Web SQL Database for database storage based on indexes and has the SQL query language SQLite. Web SQL Database is currently only supported by Safari, Chrome and Opera. The final specification will most likely not take this approach. Another method is IndexedDB, which is only supported by FireFox 4 or above.

2. Browser support detection

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

3.Storage interface

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

4. Reading and storing data

  //---------------方式一--------------
   //存储数据
   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] = 
new
Value;

5. StorageEvents
Communication between Web Storage and other pages, browser windows or tabs, and Web Workers can be carried out through storage events. Objects of the same origin can listen to storage events. Add the storage event listening method as follows:

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

6.StorageEvent interface
The storage event object implements the StorageEvent interface. The declaration of this interface is as follows:

 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. Handling the maximum quota
Most browsers allow Web Storage not to exceed 5MB. In order to prevent the quota limit from being exceeded when storing data, you can use the method of catching the QUOTA_EXCEEDED_ERR exception to handle it, for example:

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

The above is the detailed content of A brief description of HTML5-Web Storage APIs. For more information, please follow other related articles on the PHP Chinese website!