H5 Web存儲技術
前言
web存儲技術在初期的時候被定義為HTML5的一部分作為其API。后來被獨立出來作為一份獨立的標准。
web存儲標准包含localStorage對象和sessionStorage對象。
這兩個對象實際上是持久化關聯數組，是名值對的映射表，“名”和“值”都是字符串。Web存儲易於使用、支持大容量(但非無限量)數據存儲同時兼容當前所有主流瀏覽器。
通過web存儲技術，可以讓一些本地應用數據存儲變得更加的方便。
介紹
Web Storage的目的是克服由cookie帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。Web Storage的兩個主要目標是：提供一種在cookie之外存儲會話數據的途徑以及提供一種存儲大量可以跨會話存在的數據的機制
Web Storage分成兩類：sessionStorage和localStorage。sessionStorage保存的數據用於瀏覽器的一次會話，當會話結束(通常是該窗口關閉)，數據被清空；localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據。除了保存期限的長短不同，這兩個對象的屬性和方法完全一樣
它們很像cookie機制的強化版，能夠動用大得多的存儲空間。目前，每個域名的存儲上限視瀏覽器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存儲空間由一級域名決定，而其他瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example.com共享5MB的存儲空間。另外，與Cookie一樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取
通過檢查window對象是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支持這兩個對象
注意：IE瀏覽器不支持在本地使用storage。
基本操作
存儲數據
sessionStorage和localStorage保存的數據，都以“鍵對”的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。所有的數據都是以文本格式保存
注意：Storage類型只能存儲字符串。非字符串的數據在存儲之前會被轉換成字符串
1、setItem()
我們可以通過setItem()方法來存儲數據。接受兩個參數，第一個參數是鍵名，第二個參數是鍵值也就是保存的數據。
一定要注意，在不同的瀏覽器當中，存儲的storage位置並不一樣，不能通用。
sessionStorage.setItem("key","value");
localStorage.setItem("key","value");
2、getItem()
我們可以通過getItem()方法讀取數據。接受一個參數，就是鍵名。
var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");
3、通過屬性操作的形式存取數據
除了使用setItem()和getItem()方法，還可以采用屬性操作的形式來操作數據。
localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'
console.log(localStorage.key1);//'value1'
清除數據
1、removeItem()
removeItem()方法用於清除某個鍵名對應的數據。
注意：清除不存在的鍵名不會報錯，只會靜默失敗
sessionStorage.removeItem('key');
localStorage.removeItem('key');
除了使用removeItem()方法，還可以使用delete操作來清除數據.
注意：IE7-瀏覽器不支持delete操作符來清除storage數據
localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null
2、clear()
clear方法用於清除所有保存的數據。
sessionStorage.clear();
localStorage.clear();
遍歷操作
1、key()
key(index)方法返回index位置處的值的名字。
sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null
2、length
length屬性返回名值對兒的個數。
console.log(sessionStorage.length);//2
我們利用length 和 key 可以遍歷所有的鍵。
for(var i = 0; i < localStorage.length; i++){
var key = localStorage.key(i);
var value = localStorage.getItem(key);
}
還可以使用for-in循環來迭代。
for(var key in localStorage){
var value = localStorage.getItem(key);
}
存儲事件
首先，要特別注意的是，該事件只發生在window對象上，在document對象上觸發無效，且使用DOM0級、DOM2級事件處理函數都可以
無論對sessionStorage還是localStorage進行操作，都會觸發storage事件。當通過屬性或setItem()方法保存數據，使用delete操作符或removeItem()刪除數據，或者調用clear()方法時，都會發生該事件
注意：只有當存儲數據真正發生改變的時候才會觸發存儲事件。像給已經存在的存儲項設置一個一模一樣的值，抑或是刪除一個本來就不存在的存儲項都是不會觸發存儲事件的。通過getItem()方法獲取數據也不會觸發該事件
一般地，storage事件不在導致數據變化的當前頁面觸發。如果瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其他所有頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。可以通過這種機制，實現多個窗口之間的通信
注意：IE8-瀏覽器不支持storage事件，IE9+瀏覽器與其他標准瀏覽器有所不同，無論數據真實值是否變化，只要對數據進行設置或刪除，都會觸發該事件，且原始頁面和同一域名下的其他頁面都會觸發
這個事件的event對象有以下屬性.
url:觸發事件的鏈接地址
key:設置或者刪除的鍵名
newvalue:如果是設置值，則是新值；如果是刪除鍵，則是null
oldValue:鍵被更改之前的值
storageArea:返回觸發事件的對象
下面是一個事件的應用案例：
a.html:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多頁面之間的通訊</title>
</head>
<body>
<h1>多頁面之間的通訊</h1>
<!-- 在當前頁面改變數據，會觸發b頁面的事件，但是當前頁面不會觸發 -->
請輸入你的留言： <br>
<textarea name="" id="txt1" cols="50" rows="10" style="font-size: 30px;"></textarea>
<button id="btn">點擊存儲</button>
<hr>
<iframe src="./b.html" frameborder="1" width="773" height="346"></iframe>
</body>
<script>
// let user_name = "zhangsan";
let btn = document.getElementById('btn');
btn.onclick = function() {
// 點擊按鈕獲取用戶輸入的值
let user_info = document.getElementById('txt1').value;
// 向本地存儲數據
localStorage.setItem('zhangsan-1',user_info);
}
window.onstorage = function () {
console.log("hello,world!");
};
</script>
</html>
b.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多頁面之間的通訊</title>
</head>
<body>
<script>
window.onstorage = function (e) {
var e = e || window.event;
document.body.innerHTML = e.newValue;
};
</script>
</body>
</html>