欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue基于localStorage存儲信息代碼實例

 更新時間:2020年11月16日 10:27:03   作者:侯賽雷  
這篇文章主要介紹了Vue基于localStorage存儲信息代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

一 什么是localStorage

對瀏覽器來說,使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀,而且容量更大,它包含兩種:localStorage 和 sessionStorage

sessionStorage(臨時存儲) :為每一個數(shù)據(jù)源維持一個存儲區(qū)域,在瀏覽器打開期間存在,包括頁面重新加載

localStorage(長期存儲) :與 sessionStorage 一樣,但是瀏覽器關(guān)閉后,數(shù)據(jù)依然會一直存在

所以上次使用cookie的時候就遇到了一個坑,設(shè)置后馬上訪問session會獲取不到,蛋疼,還需要刷新一下,原因是:

當(dāng)我們首次訪問設(shè)置Cookie的頁面時,服務(wù)器會把設(shè)置的Cookie值通過響應(yīng)頭發(fā)送過來,告訴瀏覽器將cookie存儲的本地相應(yīng)文件夾中(注意:第一次訪問時本地還沒有存儲Cookie,所以此時獲取不到值);

當(dāng)?shù)诙卧L問(或在進(jìn)行cookie設(shè)置后,過期前所有的訪問)時,請求頭信息你中都會把Cookie值攜帶。(百度到的,暫時還沒理解透徹,先搬過來).二 使用方法

注意:sessionStorage 和 localStorage 的用法基本一致,引用類型的值要轉(zhuǎn)換成JSON,所以這里就只列舉localStorage

1 保存

//對象
const info = { name: 'hou', age: 24, id: '001' };
//字符串
const str="haha";
localStorage.setItem('hou', JSON.stringify(info));
localStorage.setItem('zheng', str);

2 獲取

var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng'); 

3 刪除

//刪除某個
localStorage.removeItem('hou');
//刪除所有
localStorage.clear();

4 監(jiān)聽

Storage 發(fā)生變化(增加、更新、刪除)時的 觸發(fā),同一個頁面發(fā)生的改變不會觸發(fā),只會監(jiān)聽同一域名下其他頁面改變 Storage
window.addEventListener('storage', function (e) {
  console.log('key', e.key); console.log('oldValue', e.oldValue);
  console.log('newValue', e.newValue); console.log('url', e.url);
})

5瀏覽器中查看

6

vue中實踐

根據(jù)我的需求來的一個默認(rèn)記住上次選擇的,很簡單

添加數(shù)據(jù)的時候,下次添加默認(rèn)記住我上次的選擇

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

localStorage.setItem('projectId',me.workhourData.projectId+","+me.workhourData.projectManager);在打開新建頁面的時候獲取一下就好了,只需要判斷非空就行

//記住上次選中的審核人
      if(localStorage.length>0){
        var mydata = localStorage.getItem('projectId');
        if(mydata!=null){
          var arr3=mydata.split(",");
          if(arr3[0]==me.workhourData.projectId){
            me.workhourData.projectManager=arr3[1];
          }
        }
      }

7 注意點

  • localStorage有效期是永久的。一般的瀏覽器能存儲的是5MB左右。sessionStorage api與localStorage相同。
  • sessionStorage默認(rèn)的有效期是瀏覽器的會話時間(也就是說標(biāo)簽頁關(guān)閉后就消失了)。
  • localStorage作用域是協(xié)議、主機(jī)名、端口。(理論上,不人為的刪除,一直存在設(shè)備中)
  • sessionStorage作用域是窗口、協(xié)議、主機(jī)名、端口。

知道了這些知識點后,你的問題就很好解決了。
localStorage是window上的。所以不需要寫this.localStorage,vue中如果寫this,是指vue實例。會報錯

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • uni-app 使用編輯器創(chuàng)建vue3 項目并且運(yùn)行的操作方法

    uni-app 使用編輯器創(chuàng)建vue3 項目并且運(yùn)行的操作方法

    這篇文章主要介紹了uni-app 使用編輯器創(chuàng)建vue3 項目并且運(yùn)行的操作方法,目前uniapp 創(chuàng)建的vue3支持 vue3.0 -- 3.2版本 也就是說setup語法糖也是支持的,需要的朋友可以參考下
    2023-01-01
  • vue實現(xiàn)放大鏡效果

    vue實現(xiàn)放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • Vue實現(xiàn)Tab選項卡切換

    Vue實現(xiàn)Tab選項卡切換

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)Tab選項卡切換,點擊不同標(biāo)題顯示對應(yīng)圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue Router中應(yīng)用中間件的方法

    Vue Router中應(yīng)用中間件的方法

    這篇文章主要介紹了Vue Router中應(yīng)用中間件的方法,文中講解非常細(xì)致,幫助大家更好的理解和學(xué)習(xí)vue router,感興趣的朋友可以了解下
    2020-08-08
  • 優(yōu)化Vue項目編譯文件大小的方法步驟

    優(yōu)化Vue項目編譯文件大小的方法步驟

    這篇文章主要介紹了優(yōu)化Vue項目編譯文件大小的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • Vue+Node.js+WebSocket實現(xiàn)即時通訊

    Vue+Node.js+WebSocket實現(xiàn)即時通訊

    本文主要介紹了Vue+Node.js+WebSocket實現(xiàn)即時通訊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • 深入探索VueJS Scoped CSS 實現(xiàn)原理

    深入探索VueJS Scoped CSS 實現(xiàn)原理

    這篇文章主要介紹了深入探索VueJS Scoped CSS 實現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • vue3+vite+ts父子組件之間的傳值

    vue3+vite+ts父子組件之間的傳值

    隨著vue2的落幕,vue3越來成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實例詳解,感興趣的朋友一起看看吧
    2023-12-12
  • Vue.js實現(xiàn)無限加載與分頁功能開發(fā)

    Vue.js實現(xiàn)無限加載與分頁功能開發(fā)

    這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)無限加載與分頁功能開發(fā)實踐,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Vue中babel.config.js配置示例詳解

    Vue中babel.config.js配置示例詳解

    Babel是一個JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語法,以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下
    2023-02-02

最新評論