HTML5 storage detailed explanation

This article mainly introduces the detailed explanation of HTML5 storage storage. Interested friends can refer to it. I hope it will be helpful to everyone.

HTML5storage provides a way for websites to store information locally on your computer and retrieve it when needed later. This concept is similar to cookie, the difference is that it is designed for larger capacity storage. Cookie is limited in size, and cookie will be sent every time you request a new page. The #storage of HTML5 is stored on your computer. After the page is loaded, the website can use Javascript to get this data.

1、sessionStorage

##Detection

!!window.sessionStorage;

Common methods

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

window.sessionStorage.name = 'rainman';           // 赋值  
window.sessionStorage.setItem('name','cnblogs');  // 赋值  
window.sessionStorage.getItem('name');            // 取值  
window.sessionStorage.removeItem('name');         // 移除值  
window.sessionStorage.clear();                    // 删除所有sessionStorage

##Event:

window.onstorage

Detect value changes, browser support is not good.

illustrate:

The storage of cookies is limited to 4k. In comparison, session storage has larger storage space, but as for the specific size, it depends on the browser manufacturer's specifications. accomplish.
Cookie has a mechanism, which is to send the cookie to the server every time the client requests the server. This will undoubtedly do a lot of unnecessary operations, because not every request The server needs all the information of the cookie, and session storage solves this problem very well. It does not send it automatically, which reduces unnecessary work.
The life cycle of data stored through sessionStorage is similar to Session. The data will no longer exist after closing the browser (or tab). But sessionStorage still exists after refreshing the page or using the "forward" or "back button".
session storage The value of each window is independent (each window has its own data). Its data will disappear as the window is closed. The sessionStorage between windows It cannot be shared either.
The key and value in setItem are stored in the form of strings. That is to say, if there is the following code: setItem(‘count’, 1); what you get through getItem(‘count’) 5 will not be the expected 6 (integer), but ‘16’ (string).
When you use setItem again to set the value of an existing key, the new value will replace the old value.
When the data in storage changes, the corresponding event (window.onstorage) will be triggered. However, the current support for this event in various browsers is not perfect and can be ignored for the time being.

2、localStorage

Detection

!!window.localStorage;

方法和sessionStorage相同

说明：

1. local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。

2. 而且对于某一个域下来说，local storage是共享的（多个窗口共享一个“数据库”）。

3. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

举例

//结合JSON.stringify使用更强大  
var person = {'name': 'rainman', 'age': 24};  
localStorage.setItem("me", JSON.stringify(person));  
JSON.parse(localStorage.getItem('me')).name;    // 'rainman'  
  
/** 
* JSON.stringify，将JSON数据转化为字符串 
*     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}' 
*     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]' 
* JSON.parse，反解JSON.stringify 
*     JSON.parse('["a","b","c"]')                    // ["a","b","c"] 
*/

3、Database Storage

对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

A、打开链接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开链接  
if(!db) { alert("Failed to connect to database."); }                         // 检测连接是否创建成功

以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。

B、执行查询

db.transaction( function(tx) {   
            tx.executeSql(  
            "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
            ['lebel', new Date().getTime()],   
            function(tx2, result){ alert('成功'); },   
            function(tx2, error){ alert('失败:' + error.message); }  
            );   
            });

1. 执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。

2. 该函数具有一个类型事务的参数（tx）。

3. 该事务参数（tx）具有一个函数：executeSql()。这个函数使用四个参数：
   表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。

4. 执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
   

5. 执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图 
   

C、其它

• Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。

D、示例

//创建数据库  
var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);   
if(!db){  
	    alert("Failed to connect to database.");   
	} else {  
	    alert("connect to database 'K'.");   
	}  
	  
	// 创建表  
	db.transaction( function(tx) {   
	    tx.executeSql(  
	        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",   
	        [],   
	        function(){ alert('创建users表成功'); },   
	        function(tx, error){ alert('创建users表失败:' + error.message); }  
	    );  
	});   
	  
	// 插入数据  
	db.transaction(function(tx) {   
	    tx.executeSql(  
	        "INSERT INTO users (id, name) values(?, ?)",   
	        [Math.random(), 'space'],   
	        function(){ alert('插入数据成功'); },   
	        function(tx, error){ alert('插入数据失败: ' + error.message);}  
	    );   
	});   
	  
	// 查询  
	db.transaction( function(tx) {   	    tx.executeSql(  
	        "SELECT * FROM users", [],    
	         function(tx, result) {  
	            var rows = result.rows, length = rows.length, i=0;  
	            for(i; i < length; i++) {   
	                alert(  
	                    &#39;id=&#39; + rows.item(i)[&#39;id&#39;] +   
	                    &#39;name=&#39;+ rows.item(i)[&#39;name&#39;]  
	                );   
	            }   
	        },   
	        function(tx, error){  
	            alert(&#39;Select Failed: &#39; + error.message);  
	        }  
	    );   
	});   
	  
	// 删除表  
	db.transaction(function (tx) {    
	    tx.executeSql(&#39;DROP TABLE users&#39;);   
	    });

4、globalStorage

This is also proposed in html5. After the browser is closed, the information stored using globalStorage can still be used Keep it, localStorageThe same, the information stored in any page in the domain can be shared by all pages

Basic syntax

• globalStorage['developer.mozilla.org'] - All subdomains under developer.mozilla.org can store objects through this namespace Read and write.

• globalStorage['mozilla.org'] - All web pages under the mozilla.org domain name can be read and written through this namespace storage object.

• globalStorage['org'] - All web pages under the .org domain name can be read and written through this namespace storage object.

• globalStorage[''] - Any web page under any domain name can read and write through this namespace storage object

Method attribute

• setItem(key, value) - Set or reset the key value.

• getItem(key) - Get the key value.

• removeItem(key) - Delete the key value.

• Set key value: window.globalStorage["planabc.net"].key = value;

• Get key value: value = window .globalStorage["planabc.net"].key;

Other

• Expired The time is the same as localStorage, and some other features are also similar to localStorage.

• Currently Firefox only supports globalStorage storage under the current domain. If you use the public domain, it will cause an error similar to "Security error" code: "1000".

5、Compatibility

##OperaSafari (WebKit)localStoragesessionStorage--2------ Detailed explanation of vuex localstorage dynamic monitoring storage steps

Method	##Chrome	##Firefox (Gecko)	Internet Explorer
4	2	8	##10.50	4
5	2	8	##10.50	4	##globalStorage
					related suggestion:

HTMl5 storage method sessionStorage and localStorage detailed explanation

vuex combines localstorage to dynamically monitor storage changes

The above is the detailed content of HTML5 storage detailed explanation. For more information, please follow other related articles on the PHP Chinese website!