博客

Vue 使用 localStorage储存信息

首先说一下cookies sessionStorage和localstorage三者的区别

相同点：

• 都存储在客户端

不同点：

• 存储大小：
  • 
cookie

    数据大小不能超过
    
    4k
    
    。
  • 
sessionStorage

    和
    
localStorage

    。虽然也有存储大小的限制，但比
    
cookie

    大得多，可以达到
    
    5M或更大
    
    。
• 有效时间：
  • 
localStorage

    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • 
sessionStorage

    数据在当前浏览器窗口关闭后自动删除。
  • 
cookie

    设置的cookie过期时间之前一直有效
• 数据与服务器之间的交互方式
  • 
cookie

    的数据会自动的传递到服务器，服务器端也可以写
    
cookie

    到客户端
  • 
sessionStorage

    和
    
localStorage

    不会自动把数据发给服务器，仅在本地保存。

然后开始正题

添加

在

methods

定义一个方法，可以通过点击事件触发

methods: {
        saveStorage () {
           localStorage.setItem('test', '123') //  第一个值为key，第二个值为value，value可以是变量
        }
    }

触发后，打开控制台的

Application

选项卡，点击

Storage

下的

Local Storage

可以看到右侧已经添加进入了相应的值。

获取

在写一个方法用来获取

methods: {
       getStorage () {
           const info = localStorage.getItem('test')
           console.log(info)
       }
   }

调用此方法后，可以看到控制台输出了存储后的值

删除

methods: {
       removeStorage () {
           localStorage.removeItem('test')
       }
   }

调用此方法后，发现选项卡里面储存的key为

test

的值已经没了

在储存变量的时候，记得要使用JSON.stringify()方法，在获取的时候要使用JSON.parse()方法