标签:存储 本地 setItem uname JSON localStorage key
本地存储介绍
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,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')))
标签:存储,本地,setItem,uname,JSON,localStorage,key 来源: https://www.cnblogs.com/yyshow/p/16294356.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。