三種瀏覽器儲存方案,你還擔心資料無處放嗎

2022-09-19 10:48:09 字數 3030 閱讀 4523

基本概念

webstorage提供了兩種儲存方式,localstorage和sessionstorage。

具體的區別在於

屬性和方法

localstorage和sessionstorage都具有以下屬性和方法

因為locastorage和sessionstorage是window上的屬性,所以在console控制台上也可以直接操作

工具封裝

localstorage和sessionstorage只能儲存字串,當遇到物件時,會直接把它轉成 「[object object]」這樣的字串,這樣以後讀取也只能讀到「[object object]」,資料就會丟失

const lesson = ;

localstorage.setitem("lessonobj", lesson);

localstorage.setitem("lessonstr", json.stringify(lesson));

所以我們在儲存物件時,需要先將物件轉成字串

每一次儲存資料都要 stringify 將資料序列化,讀取資料都需要 parse 解析成物件,可以將重複的**進行封裝,成為工具函式

class icestore 

setitem(key, value)

getitem(key)

}  key(index)

removeitem(key)

clear()

length()

}const localcache = new icestore(true);

const sessioncache = new icestore(false);

export ;

在需要使用 localstorage/sessionstorage的地方引入即可~

indexeddb是用於客戶端的資料庫,使用鍵值對來儲存大量的資料,有些像nosql。

通過以下**先開啟對於indexeddb的連線

// 開啟名為icedb的資料庫,沒有則新建乙個

const dbrequest = indexeddb.open("icedb")

// 第一次開啟/版本更新時呼叫函式

dbrequest.onupgradeneeded = function(event))

}let db = null

dbrequest.onsuccess = function(event)

此時已經建立了名為icedb的資料庫,其中有一張表,名為user

// transaction中的第乙個引數可以是陣列,readwrite 可以讀和寫

const transaction = db.transaction("users", "readwrite")

// objectstore方法從上面的事務中拿到store物件

const store = transaction.objectstore("users")

// 增加

const request = store.add()

// 一次操作完成的**

request.onsuccess = function(){}

// 一次操作失敗的**

request.onerror = function(){}

// 事務全部完成,傳入完成的**

transaction.oncomplete = function(){}

// 查詢,開啟游標

const request = store.opencursor()

request.onsuccess = function(event)else

}}// 修改

// 先查找到指定的資料,通過游標直接改變資料

const value = cursor.value;

value.name = "lucy";

cursor.update(value)

// 刪除

// 先查找到指定的資料,呼叫游標的刪除方法

cursor.delete()

最終儲存的效果

cookie雖然也是瀏覽器的儲存方案,但一般由服務端通過http請求頭 set-cookie 字段設定,瀏覽器端每次傳送請求的時候都會攜帶

cookie的分類

cookie設定過期時間

cookie其它屬性

圖示如下

瀏覽器端設定cookie

通過 document.cookie 來設定,如果伺服器端設定了 httponly,則瀏覽器端不可以更改伺服器設定的cookie

具體的cookie設定方式可以參考這一篇伺服器的文章~

如何通過cookie、session鑑權(nodejs/koa)

IE8瀏覽器相容 三種方式

第一篇,先寫乙個最初遇到的乙個問題,隨著ie8的應用,懂得 時尚 的都對自己的瀏覽器公升了級,對於我們開發者也帶來了問題,也就是ie8自帶的乙個相容模式,雖然在ie8中已經有,但有時頁面瀏覽中預設載入模式的不同會引起頁面樣式的改變,當然,每個做開發的都希望自己的作品能夠以最漂亮的面孔展現給使用者,特...

三種辦法解決IE瀏覽器突然關閉

一 對ie 5.x使用者,執行 控制面板 新增或刪除程式 在列表中選擇 internet explorer error reporting 選項,然後單擊 更改 刪除 按鈕,將其從系統中刪除。二 對windows 9x me nt 2000下的ie 6.0使用者,則可開啟 登錄檔編輯器 找 hkey...

嵌入式的瀏覽器有第三種方案啦

最初在遊戲裡嵌入網頁用的是llmozlib,說實話,還不錯,用的firefox的解析引擎 但是它的編譯太麻煩了,而且跟一些引擎 直接鏈結到一起的話還會衝突 最讓人覺得不爽的是,附帶了一大堆的dll和資源檔案 後來自己用ie的iwebbrowser2實現了乙個嵌入瀏覽器,除了滾動條拖動和效率還有點問題...