浏览器本地存储(Html5新增:WebStorage)

Posted 2021-12-14 问某完红

1.localStorage:本地存储,浏览器刷新页面还会存在,除非手动去删除,否则会一直存在,写在本地硬盘中

1.设置属性:localStorage.setItem(\'属性值\',\'属性名\'),属性名和属性值都必须是字符串,如果传入Number类型的值会被自动转为字符串,如果是对象,则必须调用JSON.stringify来转换为JSON格式的字符串()

代码示例:localStorage.setItem(\'msg\',\'hello\') ---值为字符串类型

代码示例:localStorage.setItem(\'msg\',JSON.stringify(ObjectName)) ---值为对象类型

 

2.读取属性:localStorage.getItem(\'属性名\') 如果要读取的属性名的属性值为对象可以使用JSON.parse()解析转为对象

代码示例:localStorage.getItem(\'msg\') ---值为字符串类型

代码示例:let obj = localStorage.getItem(\'ObjectName\') obj = JSON.parse(obj) ---值为对象类型

 

3.删除属性:loaclStorage.removeItem(\'属性名\')

示例代码:loaclStorage.removeItem(\'msg\')

4.清空属性:loaclStorage.clear()

2.sessionStorage:会话存储:浏览器刷新页面就会消失

1.设置属性:sessionStorage.setItem(\'属性值\',\'属性名\'),属性名和属性值都必须是字符串,如果传入Number类型的值会被自动转为字符串,如果是对象,则必须调用JSON.stringify来转换为JSON格式的字符串()

代码示例:sessionStorage.setItem(\'msg\',\'hello\') ---值为字符串类型

代码示例:sessionStorage.setItem(\'msg\',JSON.stringify(ObjectName)) ---值为对象类型

 

2.读取属性:sessionStorage.getItem(\'属性名\') 如果要读取的属性名的属性值为对象可以使用JSON.parse()解析转为对象

代码示例:sessionStorage.getItem(\'msg\') ---值为字符串类型

代码示例:let obj = sessionStorage.getItem(\'ObjectName\') obj = JSON.parse(obj) ---值为对象类型

 

3.删除属性:sessionStorage.removeItem(\'属性名\')

示例代码:sessionStorage.removeItem(\'msg\')

4.清空属性:sessionStorage.clear()

注意:读取没有的属性值会返回null,JSON.parse(null)的结果还是null