溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了localStorage本地存儲和sessionStorage會話存儲實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇localStorage本地存儲和sessionStorage會話存儲實例分析文章都會有所收獲，下面我們一起來看看吧。
HTML5允許在客戶端實現(xiàn)較大規(guī)模的數(shù)據(jù)存儲，用戶可以使用web存儲，也可以使用web sql數(shù)據(jù)庫，這兩項新增功能為瀏覽器成為應用程序開發(fā)平臺奠定了堅持的數(shù)據(jù)操作基礎。
Web存儲機制是一中通過字符串形式的key/value對來安全的存儲和使用數(shù)據(jù)的方法，其目標是提供一個更全面的，可以創(chuàng)建交互式Web應用程序的方法。
一、web存儲和cookie的對比：
1）首先是容量不同，web存儲的存儲量更大，更安全，更易于使用，而Cookie的存儲量是有限制的。
2）存儲的持久性不同，web存儲是通過瀏覽器來永久存儲和李大小的數(shù)據(jù)的方法
二、本地存儲和會話存儲
在客戶端存儲數(shù)據(jù)的類型有兩種：
1）localStorage ： 本地存儲，沒有時間限制的數(shù)據(jù)存儲
2）sessionStorage ： 會話存儲，針對一個會話期的數(shù)據(jù)存儲
下面就寫一個簡單的例子，在客戶端持久存儲數(shù)據(jù)
Js代碼 收藏代碼
var strDomain = "127.0.0.1"; //定義當前域
try{
/**
*因為較早版本的FireFox沒有實現(xiàn)localStorage，但他提供了globalStorage屬性用于指定域創(chuàng)建本地存儲區(qū)域，其中也可以指定這個域為當前域，因此
* ，下面這句代碼可以用來實現(xiàn)localStorage在各瀏覽器間的兼容
**/
var oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain]; //h獲取存儲區(qū)域
//查看vistorCount是否存在
//如果存在就讀取并加1，增加一次訪問統(tǒng)計
//如果不存在就意味著第一次訪問，將其初始化為1
if(oStorage.visitorCount){
oStorage.visitorCount = parseInt(oStorage.visitorCount,10) + 1;
} else {
oStorage.visitorCount = 1;
}
document.write("歡迎第" + oStorage.visitorCount + "次訪問"); //寫出訪問統(tǒng)計數(shù)據(jù)
} catch(err) {
alert(err.message ? err.message : err.toString());
}
同時我們使用開發(fā)人員工具（我使用的是Chrome瀏覽器）可以清晰的看到在客戶端存儲的數(shù)據(jù)。
在會話期存儲數(shù)據(jù)
SessionStorage針對一個Session進行數(shù)據(jù)存儲，當用戶關閉瀏覽器窗口后，數(shù)據(jù)會被刪除。
下面的代碼用于創(chuàng)建一個提交表單：
Html代碼 收藏代碼
<body>
<form action="anotherPage.jsp" method="get">
<input name="myName" id="myName" type="text" onblur="oStorage.myName.value=this.value">
<input name="mySubmit" type="submit"/>
</form>
<script>
try{
var oField = document.getElementById(myName);
oStorage = window.sessionStorage;
//查看是否存在myNameValue鍵
if(oStorage.myNameValue){
oField.value = oStorage.myNameValue;
}
}catch(err){
alert(err.message ? err.message : err.toString());
}
</script>
</body>
關于“l(fā)ocalStorage本地存儲和sessionStorage會話存儲實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“l(fā)ocalStorage本地存儲和sessionStorage會話存儲實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
