uniapp使用localStorage存储值遇到的问题

1. 数据存储localStorage

llocalStorage是本地存储,是将数据存储到浏览器的方法,一般在跨页面时使用。

uniapp提供数据存和取的api。

复制代码
uni.setStorage({
      key:'runTime',
      data:this.sumRTtime.toFixed(3),
      success:function(){
           console.log('success');
      })

从图中可以看出,值已经存储在localStorage中。

2. 数据读取

我需要在第二个页面读取这个runTime的值。我选择created阶段来读取这个值,并且设置到data中并渲染到页面上。

复制代码
uni.getStorage({    
    key: 'runTime',
    success: function (res) {
        this.wrongNum=res.data
    }
});

3. 数据传到了,但是页面不渲染

刚开始以为是生命周期传值的原因,但后来想想created()阶段一定是可以设置值的,然后打算用this.$forceUpdate()强制刷新一下,也是无效,并且报错,"is not a function"。

因为我设置值是使用"this."来得到当前页面的data值,然后我就想是不是这个this的原因,我在uni.getStorage()的success()中输出this,果然问题出现在这里。

可以看出,这里的this指向改变了,不再指向vue实例。

4. 解决方法

复制代码
    created(){
        var _this=this
        uni.getStorage({    
            key: 'runTime',
            success: function (res) {
                _this.wrongNum=res.data
            }
        });
    },

先存一下this,问题解决。

相关推荐
我们没有完整的家1 分钟前
技术速递|Playwright MCP 调试 Web 应用时,GitHub Copilot 生成断言脚本的实用方法
前端·github·copilot
universe_016 分钟前
前端学习之八股和算法
前端·学习
一川_15 分钟前
ElementUI分页器page-size切换策略:从保持当前页到智能计算的优化实践
前端
敲敲了个代码32 分钟前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate36 分钟前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫44 分钟前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪1 小时前
Vue3 响应式来!
前端·javascript·vue.js
芝士麻雀1 小时前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
Dontla1 小时前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
fruge1 小时前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux