JavaScript之BOM（下）

本地存储
1.本地存储介绍
2.本地存储localStorage
3.本地存储sessionStorage
4.存储复杂数据类型

一、本地存储介绍

1.数据存储在用户浏览器中
2.设置、读取方便、甚至页面刷新不丢失数据
3.容量较大，sessionStorage和localStorag约5M左右

二、本地存储localStorage
作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

1.存储方式：localStorage.setItem(key,value)

localStorage.setItem('uname','lily')

2.获取方式：localStorage.getItem(key)

localStorage.getItem('uname')

3.删除本地存储：localStorage.removeItem(key)

localStorage.removeItem('uname')

4.改：localStorage.setItem(key,value)

localStorage.setItem('uname','green')
//本地存储只能存储字符串数据类型  18自动转字符串
localStorage.setItem('age',18)

三、本地存储sessionStorage

特性：
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
用法跟localStorage基本相同

四、存储复杂数据类型

1.目标：能够存储复杂数据类型以及取出数据
2.本地只能存储字符串，无法存储复杂数据类型
3.解决：需要将复杂数据类型转换成JSON字符串，在存储到本地
4.语法：JSON.stringify(复杂数据类型)

const obj = {
            uanme:'lily',
            age:16,
            gender:'女'
        }
//1.复杂数据类型存储必须转换为JSON字符串存储
// //把obj转成字符串再进行存储
localStorage.setItem('obj',JSON.stringify(obj))
console.log(typeof localStorage.getItem('obj'))//string

//2. 把json字符串转换成对象
// console.log(JSON.parse(localStorage.getItem('obj')))
const str = localStorage.getItem('obj')
console.log(JSON.parse(str))