在react或vue中使用localStorage存储数据

作者:J.sky · 发表于:
2023-06-30T08:22:46.000000Z
· 更新于:
2023-08-13T22:54:57.629619Z
· Tag: JavaScript

对于一些超小型且数据临时并不重要的web应用,可以考虑把数据存储到浏览器中,使用浏览器API:localStorage

localStorage 是一种 Web API,可以在 Web 浏览器中存储和检索数据。它允许网站将数据存储在用户的本地浏览器中,而不是在服务器上。这意味着即使用户关闭浏览器或离开网站,数据也将保留在本地存储中,并在用户返回时仍然可用。

localStorage的使用

localStorage是浏览器API,所以直接调用接口即可,例如在待办事项中的数据是一个数组,我们可以把它专为JSON存储到localStorage中,方便随时调用,大致的代码如下:

vue

const todos = ref(JSON.parse(localStorage.getItem("mytodos") || "[]")); // 整个项目的数据数组
// 状态持久,当数据发生变化时就会重新存储到LocalStorage
watchEffect(() => {
localStorage.setItem("mytodos", JSON.stringify(todos.value));
});

react

const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('myreacttodos')) || []);// 存储待办事项

// 状态持久,当数据发生变化时就会重新存储到LocalStorage
useEffect(()=>{
    localStorage.setItem('myreacttodos',JSON.stringify(todos))
},[todos])

总结

二者的代码相差不多,用法相同,请对号入座,选择使用。