當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

082_html5Web存储

發布時間：2025/4/17 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 082_html5Web存储小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 在客戶端存儲數據

1.1. html5提供了兩種在客戶端存儲數據的新方法:

?1.1.1. localStorage: 沒有時間限制的數據存儲。

?1.1.2. sessionStorage: 針對一個session的數據存儲。

1.2. 之前, 這些都是由cookie完成的。但是cookie不適合大量數據的存儲, 因為它們由每個服務器請求來傳遞, 這使得cookie速度很慢而且效率也不高。

1.3. 在html5中, 數據不是由每個服務器請求傳遞的, 而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。

1.4. 對于不同的網站, 數據存儲于不同的區域, 并且一個網站只能訪問其自身的數據。

1.5. html5使用JavaScript來存儲和訪問數據。

2. localStorage方法

2.1. localStorage方法存儲的數據沒有時間限制。第二天、第二周或下一年之后, 數據依然可用。

2.2. 如何創建和訪問localStorage:

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>localStorage方法</title></head><body><script type="text/javascript">// 檢查瀏覽器支持if (typeof(Storage) !== "undefined") {localStorage.lastname = "Smith";document.write(localStorage.lastname + '<br />');// 儲存localStorage數據localStorage.setItem("lastname", "Gates");// 訪問localStorage數據document.write(localStorage.getItem("lastname"));} else {document.write("抱歉! 您的瀏覽器不支持Web Storage...");}</script></body> </html>

2.3. 下面的例子對用戶訪問頁面的次數進行計數：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>localStorage方法頁面訪問次數</title></head><body><script type="text/javascript">if (typeof(Storage) !== "undefined") {if (localStorage.pagecount) {localStorage.pagecount = Number(localStorage.pagecount) + 1;} else {localStorage.pagecount = 1;}document.write("Visits: " + localStorage.pagecount + " time(s).");} else {document.write("抱歉! 您的瀏覽器不支持Web Storage...");}</script> <p>刷新頁面會看到計數器在增長。</p><p>請關閉瀏覽器窗口, 然后再試一次, 計數器會繼續計數。</p></body> </html>

3. sessionStorage方法

3.1. sessionStorage方法針對一個session進行數據存儲。當用戶關閉瀏覽器窗口后, 數據會被刪除。

3.2. 如何創建并訪問一個sessionStorage:

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>sessionStorage方法</title></head><body><div id="result"></div><script>// 檢查瀏覽器支持if (typeof(Storage) !== "undefined") {sessionStorage.lastname = "Smith";document.write(sessionStorage.lastname + '<br />');// 儲存sessionStorage數據sessionStorage.setItem("firstname", "Gates");// 訪問sessionStorage數據document.write(sessionStorage.getItem("firstname"));} else {document.write("抱歉! 您的瀏覽器不支持Web Storage...");}</script></body> </html>

3.3. 下面的例子對用戶訪問頁面的次數進行計數：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>sessionStorage方法頁面訪問次數</title></head><body><script type="text/javascript">if (typeof(Storage) !== "undefined") {if (sessionStorage.pagecount){sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;} else {sessionStorage.pagecount = 1;}document.write("Visits: " + sessionStorage.pagecount + " time(s).");} else {document.write("抱歉! 您的瀏覽器不支持Web Storage...");}</script> <p>刷新頁面會看到計數器在增長。</p><p>請關閉瀏覽器窗口, 然后再試一次, 計數器已經重置了。</p></body> </html>

總結

以上是生活随笔為你收集整理的082_html5Web存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

_html5Web