vuex存儲和本地存儲(localstorage、sessionstorage)的區別


1. sessionStorage 

  sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。

  用法: 

    儲存: 1. 點(.)運算符                          sessionStorage.lastname = 'JSAnntQ';   

        2. 方括號([ ])運算符                 sessionStorage['lastname'] = 'JSAnntQ';

        3. localStorage.setItem      sessionStorage.setItem("lastname", "JSAnntQ"); 

    

    

    儲存: 1. 點(.)運算符                          sessionStorage.lastname  

        2. 方括號([ ])運算符                 sessionStorage['lastname'] 

        3. localStorage.getItem                sessionStorage.getItem("lastname"); 

 

2. localStorage 

  localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后,數據依然可用。

  用法: 

    儲存: 1. 點(.)運算符                          localStorage.lastname = 'JSAnntQ';   

        2. 方括號([ ])運算符                 localStorage['lastname'] = 'JSAnntQ';

        3. localStorage.setItem      localStorage.setItem("lastname", "JSAnntQ"); 

    

    

    儲存: 1. 點(.)運算符                          localStorage.lastname  

        2. 方括號([ ])運算符                 localStorage['lastname'] 

        3. localStorage.getItem                localStorage.getItem("lastname");

3. vuex

  Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。

  用法: https://vuex.vuejs.org/zh/

 

4. 總結

 

1.區別:vuex存儲在內存,localstorage(本地存儲)則以文件的方式存儲在本地,永久保存;sessionstorage( 會話存儲 ) ,臨時保存。localStorage和sessionStorage只能存儲字符串類型,對於復雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理

2.應用場景:vuex用於組件之間的傳值,localstorage,sessionstorage則主要用於不同頁面之間的傳值。

3.永久性:當刷新頁面(這里的刷新頁面指的是 --> F5刷新,屬於清除內存了)時vuex存儲的值會丟失,sessionstorage頁面關閉后就清除掉了,localstorage不會。  

注:很多同學覺得用localstorage可以代替vuex, 對於不變的數據確實可以,但是當兩個組件共用一個數據源(對象或數組)時,如果其中一個組件改變了該數據源,希望另一個組件響應該變化時,localstorage,sessionstorage無法做到,原因就是區別1。

總結來源: https://www.cnblogs.com/zifayin/p/7524805.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM