前端Vue-数据持久化到本地

最新推荐文章于 2023-10-10 15:39:32 发布

前端-莫米松

最新推荐文章于 2023-10-10 15:39:32 发布

阅读量357

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_62122557/article/details/131664430

版权

当用户输入密码后，若下次登陆还想保留上次输入的密码，这时需要将密码数据持久化到本地。

localStorage.setItem('array', ...)：使用localStorage对象的setItem方法，将键名为"array"的项设置为提供的值。localStorage是一种Web浏览器提供的持久化存储方式，可以用于在用户的浏览器中存储数据。

在将数组存储到本地时，需要将其转换为JSON格式的字符串，因为localStorage对象只能存储字符串类型的数据。它不支持直接存储JavaScript对象或数组。

使用JSON.stringify方法可以将JavaScript对象或数组转换为JSON格式的字符串。这个字符串可以存储在localStorage中，而在需要使用存储的数组时，可以通过JSON.parse方法将JSON格式的字符串转换回JavaScript对象或数组。

若想将用户的输入密码实时存入本地，需要使用vue2中的watch功能

watch是一个用于观察数据变化并执行相应操作的功能。它可以用于监视Vue实例中的数据属性、计算属性或者组件的属性。

在下面例子中，我们定义了一个watch对象，它包含一个名为password的属性。当password属性的值发生变化时，会执行定义的回调函数，传入新值作为参数。

下面为用户输入密码的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        密码：<input type="password" v-model="password">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                password:JSON.parse(localStorage.getItem('array')) 
            },
            watch:{
                password:{
                    deep:true,
                    handler(newValue){
                        localStorage.setItem('array', JSON.stringify(newValue))
                    }
                }
            }
        })
    </script>
</body>
</html>

当用户输入密码后刷新页面，页面仍会保留上次密码

前端-莫米松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端Vue-数据持久化到本地

是一个用于观察数据变化并执行相应操作的功能。它可以用于监视Vue实例中的数据属性、计算属性或者组件的属性。对象只能存储字符串类型的数据。它不支持直接存储JavaScript对象或数组。在将数组存储到本地时，需要将其转换为JSON格式的字符串，因为。属性的值发生变化时，会执行定义的回调函数，传入新值作为参数。当用户输入密码后刷新页面，页面仍会保留上次密码。在下面例子中，我们定义了一个。对象，它包含一个名为。
复制链接

扫一扫