HTML5 本地存儲Web Storage

時間 2019-11-12

標籤 html5 html 本地存儲 web storage 欄目 HTML5 简体版

原文原文鏈接

Web Storage 功能，顧名思義，就是在web上針對客戶端本地存儲數據的功能，具體來講Web Storage 分爲兩種：javascript

sessionStorage:html

將數據保存在session對象中，所謂session是指用戶在瀏覽某個網站中，從進入網站到瀏覽器關閉所通過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象能夠用來保存在這段時間內所要求保存的任何數據。html5

localStorage:java

將數據保存在客戶端本地的硬件設備（一般指硬盤，固然能夠是其餘的硬盤設備）中，便是瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時，仍然能夠繼續使用。web

sessionStorage與localStorage區別:api

這二者的區別在於sessionStorage爲臨時保存，而localStorage爲永久保存。瀏覽器

對比session和cookie的區別主要體如今一下三點：cookie

1.容量大，IE8裏面是10M, 不一樣的瀏覽器支持的大小不一致。session

2. 不會隨着會話來傳輸。網站

3. 讀取和寫入方便，有現成的api

無論是sessionStorage, 仍是localStorage, 可以使用的API都相同，經常使用的有以下幾個方法：

1.保存數據： localStorage.setIterm(key,value); sessionStorage.setItem(key, value);

2.讀取數據： localStorage.getIterm(key); sessionStorage.getItem(key);

3.刪除單個數據： localStorage.removeItem(key) sessionStorage.removeItem(key);

4.刪除全部數據： localStorage.clear(); sessionStorage.clear();

兩個都有屬性length 表示Key的個數，也即key長度：

var keylength1 = localStorage.length; var keyLength2 = sessionStorage.length;

如上，key和value都必須爲字符串，換言之，Web Storage的API只能操做字符串。

Web storage 的瀏覽器支持狀況的判斷：

在使用web storage時，首先判斷是否支持該功能，有些瀏覽器不支持(IE)，只有支持纔可使用，判斷方法以下：

if(window.localStorage){  //或者 window.sessionStorage     
    alert("瀏覽支持localStorage")   
}else{      
    alert("瀏覽暫不支持localStorage")   
}   
  
//或者   
if(typeof window.localStorage == 'undefined') {  //或者 window.sessionStorage   
    alert("瀏覽暫不支持localStorage")   
}

Web Storage使用實例代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Web Storage Demo</title>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);}
function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}
function savelocalStorage(id){localStorage.setItem("message",$(id).value);}
function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}
</script>
</head>
<body>
<div>
<h2>sessionStorage Demo</h2>
<p id="sessionMsg"></p>
<input type="text" id="sessionInput" />
<input type="button" value="保存數據" onclick="savesessionStorage('sessionInput');" />
<input type="button" value="讀取數據" onclick="loadsessionStorage('sessionMsg');" />
<br />
<h2>localStorage Demo</h2>
<p id="localMsg"></p>
<input type="text" id="localInput" />
<input type="button" value="保存數據" onclick="savelocalStorage('localInput');" />
<input type="button" value="讀取數據" onclick="loadlocalStorage('localMsg');" />
</div>
</body>
</html>