HTML5學習之Web Storage基礎知識

時間 2019-11-21

標籤 html5 html 學習 web storage 基礎知識欄目 HTML5 简体版

原文原文鏈接

HTML5 Web 存儲

在HTML5 Web Storage還沒出來以前,本地存儲使用的是 cookie. 可是Web 存儲須要更加的安全與快速,這些數據不會被保存在服務器上,可是這些數據只用於用戶請求網站數據上.它也能夠存儲大量的數據，而不影響網站的性能.javascript
HTML5 定義了本地存儲規範 Web Storage ，提供了兩種存儲類型 API： sessionStorage和 localStorage 。html
使用Web Storage時，最好先檢測瀏覽器對其的支持性：java

if (window.localStorage) {
         // 瀏覽器支持 localStorage
   }else{
        // 不支持
    }
    if (window.sessionStorage) {
         // 瀏覽器支持 sessionStorage
    }else{
        // 不支持
   }  
複製代碼

localStorage

· 特色

1.生命週期

持久化的本地存儲，除非主動手動刪除數據，不然數據一直不會過時segmentfault

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就能搜出這個文件夾。）cookie

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

· 特色

生命週期：用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。
也就是說只要這個瀏覽器窗口（當下瀏覽器的當前標籤頁）沒有關閉，即便在同一標籤頁刷新頁面或進入同源另外一頁面,數據仍然存在.關閉頁面後,sessionStorage即被銷燬,即在新窗口新頁面打開同源的另外一個頁面,sessionStorage也是沒有的.
sessionStorage除了協議,主機名,端口外,還要求在同一窗口（也就是瀏覽器的標籤頁）下才能共享數據.
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>
複製代碼