本地存储
本地存储介绍
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage和localStorage约 5M 左右
本地存储分类
localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
特性:
-
可以多窗口(页面)共享(同一浏览器可以共享)
-
以键值对的形式存储使用
语法:
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
// 存数据: // localStorage.setItem('属性名','属性值') const uname = 'sansna' localStorage.setItem('uname',uname) localStorage.setItem('age',22) // 获取数据:localStorage.getItem(key) // 取不到返回null console.log(localStorage.getItem( 'uname' )) console.log(localStorage.getItem( 'age' )) // 删除数据:localStorage.removeItem(key) localStorage.removeItem( 'uname' ) localStorage.removeItem( 'age' )
sessionStorage
生命周期:为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同
存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型
解决:需要将复杂数据类型转换成JSON字符串,在存储到本地
语法:JSON.stringify(复杂数据类型)
因为本地存储里面取出来的是字符串,不是对象,无法直接使用
解决:把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)
const obj = { stuId : 1, uname : '小明', age : 23, gender : 'man', city : "北京" } //存储数据 localStorage.setItem('user',JSON.stringify(obj)) //取数据 console.log(JSON.parse(localStorage.getItem('user')))
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战