localStorage、sessionStorage是Html5的特性,IE7以下瀏覽器不支持
為什么要掌握l(shuí)ocalStorage、和sessionStorage。
JS中為了減少與服務(wù)器的通信，經(jīng)常會(huì )用到保存的數據到本地的功能，
例如本地用戶(hù)信息保存。
localStorage和sessionStorage的區別：
(1)、localStorage和sessionStorage一樣都是用來(lái)存儲客戶(hù)端臨時(shí)信息的對象。
(2)、他們均只能存儲字符串類(lèi)型的對象（雖然規范中可以存儲其他原生類(lèi)型的對象，但是目前為止沒(méi)有瀏覽器對其進(jìn)行實(shí)現）。
(3)、localStorage生命周期是永久，這意味著(zhù)除非用戶(hù)顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。
sessionStorage生命周期為當前窗口或標簽頁(yè)，一旦窗口或標簽頁(yè)被永久關(guān)閉了，那么所有通過(guò)sessionStorage存儲的數據也就被清空了
(4)、不同瀏覽器無(wú)法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁(yè)面間可以共享相同的localStorage（頁(yè)面屬于相同域名和端口），但是不同頁(yè)面或標簽頁(yè)間無(wú)法共享sessionStorage的信息。這里需要注意的是，頁(yè)面及標簽頁(yè)僅指頂級窗口，如果一個(gè)標簽頁(yè)包含多個(gè)iframe標簽且他們屬于同源頁(yè)面，那么他們之間是可以共享sessionStorage的。
(5)、
http://www.test.com
https://www.test.com （不同源，因為協(xié)議不同）
http://my.test.com（不同源，因為主機名不同）
http://www.test.com:8080（不同源，因為端口不同）
localStorage、和sessionStorage的用法:
localStorage和sessionStorage使用時(shí)使用相同的API：
localStorage.setItem("key","value");//以“key”為名稱(chēng)存儲一個(gè)值“value”
localStorage.getItem("key");//獲取名稱(chēng)為“key”的值
枚舉localStorage的方法：
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i)?;
var value = localStorage.getItem(name);?
}
刪除localStorage中存儲信息的方法：
localStorage.removeItem("key");//刪除名稱(chēng)為“key”的信息。
localStorage.clear();?//清空l(shuí)ocalStorage中所有信息
代碼實(shí)現:
A.js:
[javascript]
view plain copysessionStorage.setItem("user_name","test333");
B.js:
[javascript]
view plain copyalert(sessionStorage.getItem("user_name")); //打印test333
sessionStorage.setItem("user_name","test22");
C.js:
[javascript]
view plain copyalert(sessionStorage.getItem("user_name")); //打印test22
1.調用方法相同
各自都包含以下幾種操作:
?1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//根據key獲取對應的值;
window.sessionStorage.getItem(key);
window.localStorage.getItem(key);
//新增key-value,若key已存在,則更新value;
window.sessionStorage.setItem(key,value);
window.localStorage.setItem(key,value);
//根據key移除對應的值
window.sessionStorage.removeItem(key);
window.localStorage.removeItem(key);
//移除全部key-value
window.sessionStorage.clear();
window.localStorage.clear();
//根據索引獲取對應key
window.sessionStorage.key(index);
window.localStorage.key(index);
2.生命周期不同
sessionStorage是人如其名,只針對當前session(會(huì )話(huà))有效,關(guān)閉標簽頁(yè)即失效;
localStorage則不然,即使關(guān)閉了標簽頁(yè)甚至瀏覽器,依然存在,下次打開(kāi)頁(yè)面時(shí),依然可以直接使用,
但是要注意,清除瀏覽器緩存時(shí),localStorage的內容也會(huì )清理掉;
3.數據共享
sessionStorage由于上述特性,也就不能夠在不同頁(yè)面之間進(jìn)行數據共享,同一域名也是不可以的;
localStorage則能夠實(shí)現該需求,但是僅限于同一域名下;
JS瀏覽器Session存取數據vm.indexdata.indexId = id; vm.indexdata.indexName = name; var tempIndex = JSON.stringify(vm.indexdata); window.sessionStorage["searchIndex"] = tempIndex;//調用取值JSON.parse(window.sessionStorage.getItem("searchIndex")).indexIdJSON.parse(window.sessionStorage.getItem("searchIndex")).indexName)//判斷session是否存在 if (window.sessionStorage["searchIndex"]) {}//移除sessionwindow.sessionStorage.removeItem("searchIndex");
獲取sessionStorage的意義
首先獲取它是為了將獲得的信息輸出或者alert（）；讓人容易看到，
其次，在靜態(tài)頁(yè)面中，如果使用sessionStorage就相當于在動(dòng)態(tài)頁(yè)面里連接了數據庫一樣
例如：我上一篇所做的為button按鈕添加回車(chē)事件的項目中所用到的可以使用js中的sessionStorage獲取頁(yè)面輸入的信息，也可以獲得后臺計算所得的數據，并且顯示出來(lái)。
廢話(huà)不多說(shuō)，看代碼重要：
具體實(shí)現
?1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function login(){
var username=window.document.getElementById("username").value;
var password=window.document.getElementById("password").value;
if(password=="123456")
{
window.sessionStorage.setItem("username", username);
window.location.href="../index1.html" rel="external nofollow" ;
}else{
alert("密碼錯誤請輸入正確的密碼，例如：123456！");
return false;
}
}
</script>
<input type="text" id="username" class="11" placeholder="請輸入真實(shí)姓名"/>
<input type="password" id="password" placeholder="請輸入密碼（默認密碼123456）"/>
<input type="button" value="登錄考試" onclick="login()">
以上代碼是獲取username的值并傳到下一個(gè)界面
并且獲得password的值與事先設置好的對比，不同就是錯誤 就不可以登錄
?1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
$(function () {
var username= window.sessionStorage.getItem("username")
$("#yhm").html("登錄用戶(hù)："+username)
$("#name").html(username)
if(window.sessionStorage.getItem("username")===null){
alert("您還沒(méi)有登錄，請登錄后重試！")
window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
}
$("#esc").on("click",function(){
window.sessionStorage.clear();
window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
});
})
</script>
獲取前段頁(yè)面輸入的值并且顯示至對應的位置
?1
<div id="yhm"></div>
并且判斷是否有sessionStorage的值，如果沒(méi)有，自動(dòng)返回登錄頁(yè)面，并做出相應的提示
點(diǎn)擊事件觸發(fā)后清空sessionStorage的值
?1
2
3
4
5
6
<script>
$("#esc").on("click",function(){
window.sessionStorage.clear();
window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
});
</script>
當點(diǎn)擊id為esc的按鈕時(shí)觸發(fā)clear事件
?1
<button id="esc" style="background-color: #FF0000">退出考試系統</button>
則自動(dòng)返回登錄界面
