vue快速入门（二十五）本地存储与初始化使用

代码对我眨眼睛

已于 2024-04-15 14:55:29 修改

阅读量466

点赞数 8

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-04-15 14:51:53 首次发布

本文链接：https://blog.csdn.net/m0_73756108/article/details/137385024

版权

vue 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

注释很详细，直接上代码

新增内容

本地获取数据
数据存储到本地

源码

<!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="root">
    <div>
      姓名：
      <input type="text" v-model="msg.name">
    </div>
    <div>
      年龄：
      <input type="text" v-model="msg.age">
    </div>
  </div>
  
    <!-- 导入vue的js代码：不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          //从本地获取数据，没有获取到，就使用默认内容
          msg: JSON.parse(localStorage.getItem('msg')) || {
            name: '张三',
            age: 18
          }
        },
        methods: {// 方法
          
        },
        computed:{// 计算属性
          
        },
        watch:{// 侦听器
         msg:{          
          deep:true,
          handler(val){
            // 将数据保存到本地
            localStorage.setItem('msg',JSON.stringify(val))
          }
         }
        }
      })
    </script>
</body>

</html>