HTML5學習之Web Storage基礎知識

CHIEMINCHAN發表於2018-05-11
HTMLWeb

HTML5 Web 儲存

  • 在HTML5 Web Storage還沒出來之前,本地儲存使用的是 cookie. 但是Web 儲存需要更加的安全與快速,這些資料不會被儲存在伺服器上,但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能.

  • HTML5 定義了本地儲存規範 Web Storage ， 提供了兩種儲存型別 API： sessionStorage和 localStorage 。

  • 使用Web Storage時，最好先檢測瀏覽器對其的支援性：

   if (window.localStorage) {
         // 瀏覽器支援 localStorage
   }else{
        // 不支援
    }
    if (window.sessionStorage) {
         // 瀏覽器支援 sessionStorage
    }else{
        // 不支援
   }  
複製程式碼

localStorage

· 特點

1.生命週期

持久化的本地儲存，除非主動手動刪除資料，否則資料一直不會過期

2.localStorage受同源策略的限制

藉助網上資料對同源的理解:
同源策略（same-origin policy）是瀏覽器執行的一種安全措施，目的是為了保證使用者資訊的安全，防止惡意的網站竊取資料.同域要求兩個站點同協議,同域名,同埠.

針對http://www.foo.com是否同源的判斷規則：
https://www.foo.com(不同域,協議不同)
http://xeyeteam.foo.com(不同域,xeyeteam子域與www子域不同)
http://foo.com(不同域,域名不同,頂級域與www子域不是一個概念)
http://www.foo.com:8080(不同域,8080和預設埠不一定相同)
http://www.foo.com/a/(同域,滿足同協議同域名同埠,只是這裡多了一個目錄而已)

同源情況下,localStorage能跨標籤和跨頁進行資料傳輸,而在不同源情況下就不能共享localStorage的資料,但網上也提供了很多方法實現了localStorage的跨域儲存功能.如:
https://www.jianshu.com/p/e86d92aeae69

加深理解同源策略:
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

3.儲存方式

使用鍵值對的方式儲存字串，存取的資料只能是字串

4.儲存地址

C:\Users\18011\AppData\Local\Google\Chrome\User Data\Default\LocalStorage（不同電腦不一樣，需要開啟隱藏檔案顯示，但是在C盤搜尋localStorage就能搜出這個資料夾。）

5.不建議儲存敏感資訊,可儲存普通快取資訊

https://dev.to/rdegges/please-stop-using-local-storage-1i04?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

· 方法

1. 設定

setItem(key,value)：在本地客戶端儲存一個字串型別的資料;
setItem.key=value：也可以直接通過此方式儲存。

    localStorage.setItem("name","chieminchan"); //儲存鍵名為name和鍵值為chieminchan的資料到本地
    localStorage.age = "18";
複製程式碼

2. 獲取

getItem(key) ： 讀取已儲存在本地的資料，獲取鍵值;
localStorage.key：也可以直接通過此來獲取值.
另外，還可以通過 localStorage.key(0) 獲取鍵名.

var data = localStorage.getItem("name");
console.log(data); //chieminchan
複製程式碼

3. 刪除

removeItem(key)：移除已儲存在本地資料,通過鍵名作為引數刪除資料;
localStorage.clear()：也可以一次性清除所有儲存.

localStorage.removeItem("name"); //從本地儲存中移除鍵名為name的資料
console.log(localStorage.getItem("name"));//null
    或
localStorage.clear();   //移除本地儲存中所有資料
console.log(localStorage.getItem("name")); //null
複製程式碼



sessionStorage

· 特點

  1. 生命週期：用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。
    也就是說只要這個瀏覽器視窗（當下瀏覽器的當前標籤頁）沒有關閉，即使在同一標籤頁重新整理頁面或進入同源另一頁面,資料仍然存在.關閉頁面後,sessionStorage即被銷燬,即在新視窗新頁面開啟同源的另一個頁面,sessionStorage也是沒有的.
  2. sessionStorage除了協議,主機名,埠外,還要求在同一視窗（也就是瀏覽器的標籤頁）下才能共享資料.
  3. sessionStorage能在單個標籤頁中進行同源頁面跨頁面訪問,用sessionStorage實現頁面之間的資料傳輸,不用向伺服器傳送請求,不會洩露在使用者使用的瀏覽器中,一定程度上保證了資料的安全性.

· 方法

方法與localStorage使用方法一樣。

· 測試例子

<script type="text/javascript">
    //sessionStorage
    if (sessionStorage.sessionCount) {
	sessionStorage.sessionCount = Number(sessionStorage.sessionCount)+1;
    }else{
	sessionStorage.sessionCount = 1;
    }
    console.log("sessionStorage.sessionCount："+sessionStorage.sessionCount);
	
    //localStorage
    if (localStorage.localCount) {
        localStorage.localCount = Number(localStorage.localCount)+1;
    }else{
        localStorage.localCount = 1;
    }
    console.log("localStorage.localCount："+localStorage.localCount); 
</script>
複製程式碼



Web Storage事件監測

· storage事件

1.在HTML5中，可以通過window物件的storage事件進行監聽.
當儲存的storage資料發生變化時都會觸發它,也就是說當前頁面的storage改變的時候,觸發這個事件也會觸發呼叫所有同域下其他視窗的storage事件.
但要注意：該事件不會在導致資料變化的當前頁面觸發.

即觸發storage事件的條件：
①同一瀏覽器開啟了兩個同源頁面
②其中一個頁面修改了localStorage
③另一個網頁註冊了這個事件

storage 事件可以使用 addEventListenter進行監聽:

window.addEventListener('storage',function(){  
    //當sessionStorage或localStorage中的值發生變動時所要執行的處理
    },false);  
複製程式碼

加深理解地址： https://blog.csdn.net/ruangong1203/article/details/52841135

2.在事件處理函式中，觸發事件的事件物件（event引數值）有以下屬性：
①event.key
屬性值為在sessionStorage或localStorage中被修改的資料鍵值;

②event.oldValue
屬性值為在sessionStorage或localStorage中被修改前的值;

③event.newValue
屬性值為在sessionStorage或localStorage中被修改後的值；

④event.url
屬性值為在sessionStorage或localStorage中值的頁面URL地址;

⑤event.storageArea
屬性值為變動的sessionStorage物件或localStorage物件;

3.例子

test1檔案:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test1</title>
</head>
<body>
	<script type="text/javascript">
		function storageChange(event) {
			document.write("發生變化的鍵名："+event.key+"\n");
			document.write("發生變化前它的值："+event.oldValue+"\n");
			document.write("發生變化後它的值："+event.newValue+"\n");
		}
		window.addEventListener("storage",storageChange,false)//對Storage新增事件監聽
	</script>
</body>
</html>
複製程式碼

test2檔案:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>B</title>
</head>
<body>
        //對localStorage的資料進行修改
	<label for>輸入更改localStorage中屬性test對應的資料值：
		<input type="text" id="changeData">
	</label>
	<button onclick="changeLocalStorage()">更改</button>
	<script type="text/javascript">
		function changeLocalStorage(){
			localStorage.test = document.getElementById("changeData").value;
		}
	</script>
</body>
</html>
複製程式碼

在同源情況下,test2中對localStorage中的資料進行了修改,test1就觸發storageChange事件,輸出被更改的資料情況.

Web Storage的應用

1.設計網頁皮膚

當使用者選擇某種樣式的皮膚時,關閉視窗後重新載入頁面.樣式仍為上次使用者所選擇的樣式.

簡單的模擬:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>設計網頁皮膚</title>
</head>
<body>
    <section>
        <button id="pink-btn">粉色</button>
        <button id="green-btn">綠色</button>
        <button id="brown-btn">卡其</button>
    </section>
    <div id="colorDiv" style="width: 500px;height: 500px;border: 1px solid #ccc;background-color: white;"></div>

    <!-- javascript部分 -->
    <script type="text/javascript">
    //首先檢測瀏覽器是否支援
    if (window.localStorage) {
        console.log("瀏覽器支援localStorage");
    }else{
    	console.log("瀏覽器不支援localStorage");
    }
    
    //事件監聽
    var EventUtil = {
    	addEvent :function(event,type,handler){
    		if (event.addEventListener) {
    			event.addEventListener(type,handler,false);
    		}else if(event.attachEvent){
    			event.attachEvent('on'+type,handler);
    		}else{
    			event['on'+type] = handler;
    		}
    	}
    }
    
    //設定選擇樣式和儲存至localStorage
    var colorVal = "white";
    var colorDiv = document.getElementById("colorDiv");
    var bgColor = {
    	setColor :function() {
    	    colorDiv.style.backgroundColor =window.localStorage.bg;	
    	},
    
    	pinkSet :function() {
    	    colorVal = "#FFDAB9";
    	    window.localStorage.setItem("bg",colorVal);	
    	    bgColor.setColor();
    	},
    	
    	greenSet:function(){
    	    colorVal ="#9BCD9B";
    	    window.localStorage.setItem("bg",colorVal);	
    	    bgColor.setColor();
    	},
    	
    	brownSet:function(){
    	    colorVal ="#CDC9A5";
    	    window.localStorage.setItem("bg",colorVal);	
    	    bgColor.setColor();
    	}
    }
    
    		
    window.onload = function(){
        bgColor.setColor();
        var btnList = document.getElementsByTagName("button");
        EventUtil.addEvent(btnList[0],'click',bgColor.pinkSet);
        EventUtil.addEvent(btnList[1],'click',bgColor.greenSet);
        EventUtil.addEvent(btnList[2],'click',bgColor.brownSet);
    }
    </script>
</body>
</html>
複製程式碼



附上幫助我理知識點網站: https://segmentfault.com/a/1190000012578794







小白還在學習階段,如有對某些方法內容理解錯誤,請大神們多多提出和指導!!非常感謝~

相關文章