vue中使用localStorage儲存資訊

2022-09-23 02:02:05 字數 2347 閱讀 1051

**:

對瀏覽器來說,使用 web storage 儲存鍵值對比儲存 cookie 方式更直觀,而且容量更大,它包含兩種:localstorage 和 sessionstorage

localstorage(長期儲存) :與 sessionstorage 一樣,但是瀏覽器關閉後,資料依然會一直存在

所以上次使用cookie的時候就遇到了一個坑,設定後馬上訪問session會獲取不到,蛋疼,還需要重新整理一下,原因是:

當我們首次訪問設定cookie的頁面時,伺服器會把設定的cookie值通過響應頭髮送過來,告訴瀏覽器將cookie儲存的本地相應資料夾中(注意:第一次訪問時本地還沒有儲存cookie,所以此時獲取不到值);

注意:sessionstorage 和 localstorage 的用法基本一致,引用型別的值要轉換成json,所以這裡就只列舉localstorage

回到頂部12

3456

78910

1112

13//物件

const info = ;

//字串

const str="haha";

localstorage.setitem('hou', json.stringify(info));

localstorage.setitem('zheng', str);

回到頂部12

3vardata1 = json.parse(localstorage.getitem('hou'));

vardata2 = localstorage.getitem('zheng');

回到頂部12

345//刪除某個

localstorage.removeitem('hou');

//刪除所有

localstorage.clear();

回到頂部12

345storage 發生變化(增加、更新、刪除)時的 觸發,同一個頁面發生的改變不會觸發,只會監聽同一域名下其他頁面改變 storage

window.addeventlistener('storage',function(e) )

回到頂部

回到頂部

根據我的需求來的一個預設記住上次選擇的,很簡單

新增資料的時候,下次新增預設記住我上次的選擇

所以,在新增或者提交的時候儲存值即可,

localstorage.setitem('projectid',me.workhourdata.projectid+","+me.workhourdata.projectmanager);

在開啟新建頁面的時候獲取一下就好了,只需要判斷非空就行12

3456

78910

//記住上次選中的稽核人

if(localstorage.length>0)

}

}

回到頂部

localstorage有效期是永久的。一般的瀏覽器能儲存的是5mb左右。sessionstorage api與localstorage相同。

sessionstorage預設的有效期是瀏覽器的會話時間(也就是說標籤頁關閉後就消失了)。

localstorage作用域是協議、主機名、埠。(理論上,不人為的刪除,一直存在裝置中)

sessionstorage作用域是視窗、協議、主機名、埠。

知道了這些知識點後,你的問題就很好解決了。

localstorage是window上的。所以不需要寫this.localstorage,vue中如果寫this,是指vue例項。會報錯

vue中使用axios

npm install axios vue axios 安裝以上兩個模組 在main js中引入模組 import axios from a...

webpack中使用vue

1 安裝vue cnpm i install s 2 由於在 webpack 中,推薦使用 vue 的檔案模板檔案定義元件 , 所以 ,需要安裝 能解析這種檔案的 loader cnpm i vue loader vue template comlier d 3 在 main 中,匯入 vue 模組...

vue 中使用 iconfont

vue 中使用 iconfont 二 將本地庫新增到 vue 專案 1 在 vue 專案 src assets 建立 iconfont 資料夾 2 在 iconfont 本地庫目錄中複製以下四個檔案至新建立的 iconfont 資料夾 iconfont css檔案 iconfont eot icon...