Javascript本地儲存資料方案

2021-08-08 15:30:26 字數 3063 閱讀 1753

這個恐怕是最常見也是用得最多的技術了,也是比較古老的技術了。cookie優點很多,使用起來很方便

但它的缺點也很多:

比如跨域訪問問題;無法儲存太大的資料(最大僅為4kb);本地儲存的資料會傳送給伺服器,浪費頻寬 等等;

大家都比較熟悉,這裡不再過多介紹。

下面主要說一下html5提供的幾種本地儲存方案。

這是一種持久化的儲存方式,也就是說如果不手動清除,資料就永遠不會過期。

它也是採用key - value的方式儲存資料,底層資料介面是sqlite,按網域名稱將資料分別儲存到對應資料庫檔案裡。

它能儲存更大的資料(ie8上是10mb,chrome是5mb),同時儲存的資料不會再傳送給伺服器,避免頻寬浪費。

localstorage.length 獲得storage中的個數

localstorage.key(n) 獲得storage中第n個元素對的鍵值(第乙個元素是0)

localstorage.getitem(key)獲取鍵值key對應的值

localstorage.key   獲取鍵值key對應的值

localstorage.setitem(key, value) 新增資料,鍵值為key,值為value

localstorage.removeitem(key) 移除鍵值為key的資料

localstorage.clear() 清除所有資料

另外推薦乙個第三方基於localstorage的儲存方案 jstorage,它對localstorage進行了封裝,並且實現了可以手動設定資料的過期時間

此外它還提供了兩個方法 publish/subscribe,通過使用這兩個方法可以實現同一瀏覽器多視窗之間資料同步。

詳細的說明可以訪問它的官方**:jstorage

var datastorage = window.localstorage;

var chatusers=;

chatusers.push(item);

var strchatusers = json.stringify(chatusers); //轉化為json字串

datastorage.setitem("chatusers", strchatusers);

var strchatusers = datastorage.getitem("chatusers");

//轉換為物件

var obj=json.parse(strchatusers);

var usercode ="1001";

var nums =100;

datastorage.setitem("userunreadmsgnums" + usercode, nums + 1);

var struserunreadmsgnums = datastorage.getitem("userunreadmsgnums" + usercode);

var nums2 =parseint(struserunreadmsgnums);

和伺服器端使用的session類似,是一種會話級別的快取,關閉瀏覽器會資料會被清除。

不過有點特別的是它的作用域是視窗級別的,也就是說不同視窗間的sessionstorage資料不能共享的。

使用方法(和localstorage完全相同):

sessionstorage.length獲得storage中的個數

sessionstorage.key(n)獲得storage中第n個元素對的鍵值(第乙個元素是0)

sessionstorage.getitem(key)獲取鍵值key對應的值

sessionstorage.key 獲取鍵值key對應的值

sessionstorage.setitem(key, value)新增資料,鍵值為key,值為value

sessionstorage.removeitem(key)移除鍵值為key的資料

sessionstorage.clear()清除所有資料

這個是firefox瀏覽器特有的,也是一種持久化的儲存,和localstorage只能在同一網域名稱下共享儲存不同,你可以通過設定網域名稱來指定共享的範圍,比如作用在本級網域名稱及所有子網域名稱;或者作用於主網域名稱下所有子網域名稱;甚至還可以作用任何網域名稱下。

看樣子這個使用起來很靈活,不過壞訊息是從firefox13開始就不再支援這個方法了,推薦使用localstorage了。

基本用法:

globalstorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個儲存物件來進行讀和寫。

globalstorage['mozilla.org'] —— 在mozilla.org網域名稱下面的所有網頁都可以通過這個儲存物件來進行讀和寫。

globalstorage['org'] —— 在.org網域名稱下面的所有網頁都可以通過這個儲存物件來進行讀和寫。

globalstorage[''] —— 在任何網域名稱下的任何網頁都可以通過這個儲存物件來進行讀和寫。

方法屬性:

setitem(key, value) —— 設定或重置 key 值。

getitem(key) —— 獲取 key 值。

removeitem(key) —— 刪除 key 值。

設定 key 值:window.globalstorage["planabc.net"].key = value;

獲取 key 值:value = window.globalstorage["planabc.net"].key;

indexeddb是html5-webstorage的重要一環,是一種輕量級nosql資料庫。

indexeddb api 取代了 web storage api,後者在 html5 規範中已不推薦使用。

與 web storage 相比,indexeddb 具有多個優勢,其中包括索引、事務處理和健壯的查詢功能。

indexeddb的技術特點是,不需要你去寫特定的sql語句來對資料進行操作,它是nosql的,資料形式使用的是json。

目前最新的主流瀏覽器已經都支援此標準(ie從10開始支援)

w3官方標準說明、微軟msdn文件 、mozilla官方文件、ibm介紹文件

--- end ---

Javascript本地儲存

sessionstorage localstorage 和 cookie 共同點 都是儲存在瀏覽器端,且同源的。區別 cookie資料始終在同源的http請求中攜帶 即使不需要 即cookie在瀏覽器和伺服器間來回傳遞。而sessionstorage和localstorage不會自動把資料發給伺服器...

JavaScript本地儲存

什麼是cookie?本質上cookie就是一些資料,一些儲存在電腦上的文字檔案資料。使用cookie的原因 當web伺服器向瀏覽器傳送web頁面是,在鏈結關閉時,伺服器不會記錄使用者資訊。cookie的作用 解決 如何記錄客戶端得使用者資訊 cookie的儲存形式 cookie是以鍵值對的形式儲存 ...

Web 本地儲存和Vue本地儲存例項

資料的設定和讀取比較方便。容量較大,sessionstorage大約為5mb,localstorage大約為20mb。只能儲存字串,若想要儲存json物件,則可以使用window.json.stringify 或者parse 進行序列化和反序列化編碼 sessionstorage的儲存週期只有一次會...