首页 > 其他分享 >vue使用localStorage.setItem()存储对象数据的注意事项

vue使用localStorage.setItem()存储对象数据的注意事项

时间:2023-06-08 19:55:32浏览次数:38  
标签:vue Object ruleForm person setItem localStorage

如数据对象:

ruleForm: {
    name: '',
password:'',
},

使用localStorage

localStorage.setItem("person", JSON.stringify(this.ruleForm));

取值 

localStorage.getItem("person")

  

如果不将对象转换为string类型,在取值的时候就只会取到类似[Object, Object]的东西。 

标签:vue,Object,ruleForm,person,setItem,localStorage
From: https://www.cnblogs.com/KhanLouis/p/17467502.html

相关文章

  • 初识vue3——第二天
    计算属性为什么要用计算属性模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们想根据author是否已有一些书籍来展示不同的信息:<scriptsetup>constauthor=reactive({name:'JohnDoe',books:['V......
  • vue之动态组件&插槽
    1.动态组件<!--<component:is="who"></component>--><!--component标签的is属性等于组件名字,这里就会显示这个组件--><!--keep-alive的使用:可以将组件缓存,后期切过来时资源不会被销毁--><!--动态组件start--><divid="trends"><button@click=&......
  • Vue-后台管理项目002---用户管理
    用户列表开发解决用户列表小问题现在点击用户列表了,主区域也有数据了,但是用户列表本身没有高亮意思是当前激活菜单的index,赋值给default-active属性,就可以高亮了在每次点击的时候,把对应的地址放在sessionStorage中保存起来,这样的话,就把需要激活的链接保存起来了当我们刷新页面的......
  • Vue学习笔记之Vue项目启动gyp ERR! find Python
    0x00报错详细该报错在Windows和MacOS平台均会出现,项目启动时候报错如下:E:\vue-admin\node_modules\fibers>ifnotdefinednpm_config_node_gyp(node"D:\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.......
  • vue3 祖孙通信
    利用provide和inject  provide用于向子组件(或子组件中的子组件,无限嵌套)提供自身的一些数据,或者将自身所有属性全部提供,但是提供的数据均为非响应式数据。 inject用于引入父级组件所提供的数据 1、祖父组件import{ref,reactive,provide}from"vue";constgrandFat......
  • 报错:[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined
    1.错误详情2.错误分析百度此错误发现,很多人可能忘记在main.js中引入store.js并挂载在vue实例上,或者state单词写错了我审查了很多遍代码,依然报错,读取不到state中的数据,后来想到可能是版本的问题此项目是vue2,要使用vuex3才能正常运行,我安装的时候没有指定版本,直接装的是最新的v......
  • Vue组件和Vue实例的理解
    关于VueComponent:1、组件本质是一个名为VueComponent的构造函数,并且不是程序员定义的,是Vue.extend生成的2、我们只需要写组件引入<Demo/>,Vue解析时会帮我们创建demo组件的实例对象,即Vue帮我执行的:new VueComponent(options)3、特别注意:每次调用Vue.extend,返回的都是一个全......
  • uniapp+微信小程序+vue3 实现富文本编辑器遇到的坑
     问题一:富文本编辑器初始化实例出不来,有两个原因:找的参考代码不适用微信小程序,需要用.in(this)uni.createSelectorQuery().in(this).select("#editor").context(res=>{this.editorCtx=res?.context;}).ex......
  • Vue全局事件总线(GlobalEventBus)
    Vue全局事件总线1、一种组件间通信的方式,适用于任意组件间通信。2、安装全局事件总线//main.js中安装全局事件总线newVue({render:h=>h(App),beforeCreate(){Vue.prototype.$bus=this//安装全局事件总线,$bus就是当前的vue实例}}).$mount('#app')......
  • JS stacktrace Vue 项目过大内存泄漏
    1.运行以下命令npminstall-gincrease-memory-limitincrease-memory-limit4096mb#改成适合本机的内存2.可能会提示  "node--max-old-space-size=10240"'不是内部或外部命令,也不是可运行的程序在node_modules文件夹下的.bin文件夹搜索"%_prog%"替换成%_prog%......