惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Proofpoint News Feed
Blog — PlanetScale
Blog — PlanetScale
GbyAI
GbyAI
C
Check Point Blog
腾讯CDC
Stack Overflow Blog
Stack Overflow Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
The GitHub Blog
The GitHub Blog
A
About on SuperTechFans
Recent Announcements
Recent Announcements
L
LangChain Blog
Microsoft Azure Blog
Microsoft Azure Blog
小众软件
小众软件
J
Java Code Geeks
博客园_首页
Jina AI
Jina AI
美团技术团队
H
Help Net Security
MyScale Blog
MyScale Blog
Engineering at Meta
Engineering at Meta
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
人人都是产品经理
人人都是产品经理
Y
Y Combinator Blog
S
SegmentFault 最新的问题

碎言

不懂就别瞎掰掰:【程序员的常识】写的什么玩意? PrimaryOralMathPack 小学生口算题生成器 AI 辅助编程下的程序设计与代码编写 使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用 探索编程新境界:MarsCode 助你一臂之力 使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel AI 辅助编程:免费工具的优缺点及官网一览 GitHub push更新总是失败,写个python脚本解决 把博客从GitHub迁移到到了vercel ComfyUI 和 Flux.1 安装与使用教程 Flux.1 入门必知:硬件、环境、模型 Git项目的子文件夹中的内容无法同步到远程仓库的解决方法 blender流体Fluid使用中没有流体、流体穿模等一些问题的解决方法 博客聚合网站:积薪,竟然关闭了! blender日常使用中的一些技巧 虽然只有我自己在用,但还是更新了碎言博客的源代码, 与其在迷茫中困惑,不如在努力中前进 差点忘了我还有一个博客... 秧歌、博客和AI 终于熬到了新手上路 好久没有更新博客了。。。 老妈大腿骨骨折,最近一直在医院护理 Hello, September! Ubuntu开机自动启动Docker容器运行WordPress Docker 简单快速安装部署WordPress Docker下安装MySQL 加碘盐能防核辐射的话,还怕什么核战争? shields.io 一个简洁、一致、清晰的徽章 Ubuntu下使用root登录ssh的设置 GitHub Actions 构建、部署 Next.js项目
在react或vue中使用localStorage存储数据
J.sky · 2023-06-30 · via 碎言

对于一些超小型且数据临时并不重要的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])

总结

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