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