如何操作浏览器存储_javascript中localStorage怎么用?

admin 百科 12
localStorage是浏览器提供的同源、持久化字符串存储机制,容量5–10MB,需手动JSON序列化对象,支持setItem/getItem/removeItem/clear,可通过storage事件监听跨标签页变更,但不防XSS且无过期机制。

如何操作浏览器存储_javascript中localStorage怎么用?-第1张图片-佛山资讯网

localStorage 是浏览器提供的一种简单持久化存储方式,数据保存在用户本地,关闭页面甚至重启浏览器也不会丢失,适合存少量字符串数据(比如用户偏好、登录状态标记等)。

基本用法:setItem 和 getItem

存数据用 localStorage.setItem(key, value),取数据用 localStorage.getItem(key)。注意:value 必须是字符串,如果要存对象,得先用 JSON.stringify() 转成字符串;读出来时再用 JSON.parse() 还原。

  • 存一个主题设置:localStorage.setItem('theme', 'dark')
  • 存一个用户信息对象:localStorage.setItem('user', JSON.stringify({name: '张三', id: 101}))
  • 读取并解析:const user = JSON.parse(localStorage.getItem('user'))

删除和清空数据

removeItem(key) 删除某一项,用 clear() 清空全部 localStorage(谨慎操作,会影响所有键值)。

  • 删掉主题设置:localStorage.removeItem('theme')
  • 清空当前域名下所有 localStorage:localStorage.clear()

注意事项和常见问题

localStorage 是**同源限制**的(协议+域名+端口完全一致才可访问),且容量一般为 5–10MB(因浏览器而异)。它不支持过期时间,也不能跨窗口实时同步变更(需配合 storage 事件监听)。

立即学习“Java免费学习笔记(深入)”;

标签: javascript java js json 浏览器 端口 工具 ai win 常见问题 持久化存储

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~