vue localStorage本地缓存具体使用方法

vue(localStorage本地缓存具体使用方法)vue.local.storage用法

大体概念框架

(注意:上图为大体框图结构,详情见下文)

1.在vue项目中,创建一个名为storage.js的file
名为storage.js的file
2.在上述创建file中编写如下图代码

storage.js中代码段

3.在vue项目main.js文件中编写如图代码

main.js中代码段

4.在某一需要本地缓存数据的页面编写如下图代码

  • (注:template标签中内容)

在这里插入图片描述

  • (注:scrpit标签中内容)

在这里插入图片描述

  • (注1:在data中定义数据)

定义设置,控制台打印以及移除数据函数/方法

  • (注2:在methods中定义设置,控制台打印以及移除数据函数/方法)

5.在某一另外需要获取本地缓存数据的页面编写如下代码段

  • (注:template标签中内容)

在这里插入图片描述

  • (注:scrpit标签中内容)

在这里插入图片描述(注解:上述本地缓存的数据为userInfo.userName)

  • 3
    点赞
  • 0
    评论
  • 12
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值