客戶端數據存儲 --- web storage From 《高程3》

wangbinke 發布于2019-08-21 14:37 / 3382人閱讀

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。

前言

本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorage-plus查看web storage；然后介紹storage的方法和屬性，sessionStorage和localStorage的方法和屬性繼承自storage；最后介紹sessionStorage和localStorage。

0 為什么引入web storage（對比Cookie）？

cookie不適合大量數據的存儲（Cookie的大小是受限的），因為它們由每個對服務器的請求來傳遞（每次你請求一個新的頁面的時候cooki都會被發送過去），這使得cookie 速度很慢而且效率也不高。web storage的目的就是取代Cookie進行大量的本地數據存儲，其中sessionStorage不能進行跨會話存儲，這可以使用localStorage彌補。

1 怎么使用firebug查看web storage？

一款針對firebug插件的擴展：firestorage-plus：
https://addons.mozilla.org/en...
一篇相關的介紹：
http://www.softwareishard.com...

firestorage-plus的簡單測試：

essionStorage.setItem("name", "Nicholas");
console.log(sessionStorage.name);

在firebug的DOM菜單找到localStorage和sessionStorage選項，可以查看web storage，這樣查看給出的信息有限。

也可以通過firestorage-plus進行查看：

選中某一個storage并右鍵，甚至可以對其進行編輯，可見這個插件確實比較簡單好用。

2 storage的方法和屬性

關于web storage，只需要了解兩個對象：localStorage和sessionStorage，它們都是storage的實例，因此會繼承storage的方法和屬性，包括：

clear()： 刪除所有值； Firefox 中沒有實現 。
getItem(name)：根據指定的名字 name 獲取對應的值。 
key(index)：獲得 index 位置處的值的名字。
removeItem(name)：刪除由 name 指定的名值對兒。
setItem(name, value)：為指定的 name 設置一個對應的值。
length 屬性：判斷有多少名值對兒存放在 Storage 對象中。

需要注意，web存儲的數據類型都是字符串，如果需要其他類型，需要自行轉換。

3 sessionStorage 對象

sessionStorage 對象存儲特定于某個會話的數據，也就是該數據只保持到瀏覽器關閉。這個對象就像會話 cookie，也會在瀏覽器關閉后消失。存儲在 sessionStorage 中的數據可以跨越頁面刷新而存在，同時如果瀏覽器支持，瀏覽器崩潰并重啟之后依然可用（Firefox 和 WebKit 都支持， IE 則不行）。存儲在 sessionStorage 中的數據只能由最初給對象存儲數據的頁面訪問到，所以對多頁面應用有限制。
根據sessionStorage繼承自storage的方法和屬性，可以有如下操作：

//使用方法存儲數據
sessionStorage.setItem("name", "Nicholas");
//使用屬性存儲數據
sessionStorage.book = "Professional JavaScript";

sessionStorage 中有數據時，可以使用 getItem()或者通過直接訪問屬性名來獲取數據。

//使用方法讀取數據
var name = sessionStorage.getItem("name");
//使用屬性讀取數據
var book = sessionStorage.book;

還可以通過結合 length 屬性和 key()方法來迭代 sessionStorage 中的值，如下所示。

sessionStorage.setItem("name", "Nicholas");
sessionStorage.setItem("age", "20");
sessionStorage.setItem("height", "180cm");
for (var i = 0, len = sessionStorage.length; i < len; i++) {
  var key = sessionStorage.key(i);
  var value = sessionStorage.getItem(key);
  console.log(key + "=" + value);
}

還可以使用 for-in 循環來迭代 sessionStorage 中的值：

for (var key in sessionStorage){
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}

要從 sessionStorage 中刪除數據，可以使用 delete 操作符刪除對象屬性，也可調用
removeItem()方法。

//設置四個值
sessionStorage.setItem("name", "Nicholas");
sessionStorage.setItem("age", "20");
sessionStorage.setItem("height", "180cm");
sessionStorage.setItem("book", "ring of the king");
//使用 delete 刪除一個值——在 WebKit 中無效
delete sessionStorage.name;
//使用方法刪除一個值
sessionStorage.removeItem("book");

在firebug中可以看到只剩兩個值：

4 localStorage 對象

localStorage 中的數據保留到通過 JavaScript 刪除或者是用戶清除瀏覽器緩存。要訪問同一個 localStorage 對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上，這類似于Ajax的同源策略。
由于 localStorage 是 Storage 的實例，所以可以像使用 sessionStorage 一樣來使用它。下面是一些例子。

//使用方法存儲數據
localStorage.setItem("name", "Nicholas");
//使用屬性存儲數據
localStorage.book = "Professional JavaScript";

//使用方法讀取數據
var name = localStorage.getItem("name");
//使用屬性讀取數據
var book = localStorage.book;

一般來說，對存儲空間大小的限制都是以每個源（協議、域和端口）為單位的。換句話說，每個源都有固定大小的空間用于保存自己的數據。考慮到這個限制，就要注意分析和控制每個源中有多少頁面需要保存數據。
對于 localStorage 而言，大多數桌面瀏覽器會設置每個來源 5MB 的限制。 Chrome 和 Safari 對每個來源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
對 sessionStorage 的限制也是因瀏覽器而異。有的瀏覽器對 sessionStorage 的大小沒有限制，但 Chrome、 Safari、 iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。 IE8+和 Opera 對sessionStorage 的限制是 5MB。

云服務器 GPU云服務器 python高程數據 js獲取from表單數據 js+獲取from表單數據 web數據存儲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87972.html

客戶端數據存儲 --- web storage From 《高程3》

摘要：的目的就是取代進行大量的本地數據存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數據使用屬性存儲數據使用方法讀取數據使用屬性讀取數據一般來說，對存儲空間大小的限制都是以每個源協議域和端口為單位的。前言本文首先介紹web storage和Cookie的對比，解釋web storage的優勢；隨后指出怎樣使用插firebug插件的擴展firestorag...

wfc_666 2019-08-01 15:50 評論0 收藏0
客戶端數據存儲----Cookie From 《高程3》

摘要：首先先來一段總結用于本地數據存儲，出現在服務器和瀏覽器交互的響應頭部和請求頭部中，受到單域名下的數量單個大小性能安全限制。子技術的出現緩解了單域名下的數量限制，關于子有一整套工具函數可以使用。前言本篇主要介紹Cookie技術的讀書總結，但是我認為邏輯上最好會和Web Storage技術放在一起進行對比，因此后續會再總結一篇關于WEB存儲的姊妹總結，敬請期待。首先先來一段總結：Co...

馬忠志 2019-08-20 11:39 評論0 收藏0
客戶端數據存儲----Cookie From 《高程3》

摘要：首先先來一段總結用于本地數據存儲，出現在服務器和瀏覽器交互的響應頭部和請求頭部中，受到單域名下的數量單個大小性能安全限制。子技術的出現緩解了單域名下的數量限制，關于子有一整套工具函數可以使用。前言本篇主要介紹Cookie技術的讀書總結，但是我認為邏輯上最好會和Web Storage技術放在一起進行對比，因此后續會再總結一篇關于WEB存儲的姊妹總結，敬請期待。首先先來一段總結：Co...

since1986 2019-08-01 15:50 評論0 收藏0
高程3總結#第23章離線應用與客戶端存儲

摘要：離線應用與客戶端存儲離線檢測定義了屬性來檢測設備是在線還是離線。應用緩存還有很多相關的事件，表示其狀態的改變。離線應用與客戶端存儲離線檢測 HTML5定義了navigator.onLine屬性來檢測設備是在線還是離線。這個屬性為true表示設備能上網，值為false表示設備離線。這個屬性的關鍵是瀏覽器必須知道設備能否訪問網絡，從而返回正確的值不同瀏覽器之間有小差異 IE6+...

MobService 2019-08-23 12:15 評論0 收藏0