客戶端localStorage命名衝突問題

2022-07-01 12:51:07 字數 1158 閱讀 2348

我們的前端專案客戶端儲存採用localstorage,恰好在同乙個域下部署了2個前端項(a和b)目,判斷使用者是否登入的資訊都用token欄位儲存在localstorage中。當我們開啟專案a登入後儲存了token,然後非正常退出(關掉瀏覽器視窗或者標籤頁),然後在開啟專案b,問題就出現了,專案b從localstorage中獲取到token,判斷到使用者已經登入,導致專案b顯示不正常(沒有獲取到專案b所需的各種資訊,專案a和專案b沒有半毛錢關係)。這是所謂的同域下的localstorage命名衝突問題。

為每乙個localstorage的key值提供唯一的字首區分(我們採用的是用工程名稱來區分,就是每乙個前端工程起乙個名稱,雖然有重複的可能,不過概率很小,已經能夠解決我們遇到的問題了)

在專案根目錄下建立config.js檔案,填寫工專案名:

export default

專案根目錄下新增util/storage.js檔案,寫乙個localstorage的工具函式:

/*

* * created by hs on 2020/1/14

* 封裝localstorage方法,新增ls字首,防止ls的key值命名汙染 */

export

default

*/get (key) -$`

let value =localstorage.getitem(key)

if (!value)

return

json.parse(value)

},/*

* * 儲存乙個值

* @param key

* @param value

*/set (key, value) -$`

localstorage.setitem(key, json.stringify(value))

},/*

* * 刪除乙個值

* @param key

*/remove (key) -$`

localstorage.removeitem(key)

},/*

* * 清空所有值(當前專案命名空間下的key值)

*/clear ()

}keys.map(key =>localstorage.removeitem(key))

},}

客戶端儲存 LocalStorage

localstorage是html5 提供的在客戶端儲存資料的方法。替代但不同於之前的globalstorage,規則作用範圍事先已設定好,是同乙個網域名稱 子域無效 使用同一種協議,在同乙個埠上。目前主流的較新版瀏覽器除ie8以下的以外都支援localstorage。localstorage 方法...

客戶端儲存localStorage

html5 提供了兩種在客戶端儲存資料的新方法 localstorage 沒有時間限制的資料儲存 sessionstorage 針對乙個 session 的資料儲存 url size large b localstorage b size 資料永久儲存,沒有時間限制,除非明確制定刪除。容量大,可以儲...

瘦客戶端 胖客戶端 智慧型客戶端

胖客戶端模式將應用程式處理分成了兩部分 由使用者的桌面計算機執行的處理和最適合乙個集中的伺服器執行的處理。乙個典型的胖客戶端包含乙個或多個在使用者的pc上執行的應用程式,使用者可以檢視並運算元據 處理一些或所有的業務規則 同時提供乙個豐富的使用者介面做出響應。伺服器負責管理對資料的訪問並負責執行一些...