zoukankan      html  css  js  c++  java
  • 本地存储和vuex使用对比

    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 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    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/jsanntq/p/9288144.html

  • 相关阅读:
    广域网(ppp协议、HDLC协议)
    0120. Triangle (M)
    0589. N-ary Tree Preorder Traversal (E)
    0377. Combination Sum IV (M)
    1074. Number of Submatrices That Sum to Target (H)
    1209. Remove All Adjacent Duplicates in String II (M)
    0509. Fibonacci Number (E)
    0086. Partition List (M)
    0667. Beautiful Arrangement II (M)
    1302. Deepest Leaves Sum (M)
  • 原文地址:https://www.cnblogs.com/ll15888/p/11813459.html
Copyright © 2011-2022 走看看