在localStorage中存储和检索JavaScript对象和数组

localStorage 中只能存储字符串类型的数据。如果我们想将一个对象或者数组存储进localStorage中，我们需要先将其转换为字符串。可以使用JSON.stringfy()方法，它可以将一个Js对象或者数组转为为字符串

const myObject = { key:value };

localStorage.setItem(‘mykey’,

//这里的mykey是localStorage中的数据的键，当我们存储或者检索数据时，可以利用这个键

JSON.stringfy(myObject)

);

当我们需要从localStorage中检索这个对象时，我们可以使用JSON.parse()方法将字符串转换为对象

const retriveObject = Json.parse(localStorage.getItem(‘mykey’));

下面再给出我自己的一个例子，加深理解

watch(todos,newVal =>{

​ localStorage.setItem(‘todos’,JSON.stringfy(newVal))

},{deep:true})

watch(name,newVal => {

​ localStorage.setItem(‘name’,newVal)

})

渲染页面时检索localStorage的name以及todos 并渲染到页面上 保证刷新页面后数据不消失

onMounted(() => {

​ name.value = localStorage.getItem(‘name’),

​ todos.value = JSON.parse(localStorage.getItem(‘todos’))

})