localStorage和sessionStorage本地存储

localStorage和sessionStorage本地存储

本地存储的特性：

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

localStorage：

1、生命周期永久生效，除非手动删除 ，即使关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、 以键值对的形式存储使用

4、存储的是一个字符串

使用方式：

1、存储数据

localStorage.setItem(key, value)

2、获取数据

localStorage.getItem(key)

3、删除数据

localStorage.removeItem(key)

特性：本地存储不能直接存储复杂的数据类型比如数组、对象，直接存储获取的是一个字符串，处理起来比较麻烦。需要用JSON.stringify()把js对象转为JSON字符串类型，用JSON.parse()把JSON字符串转为js对象，这样就可以直接获取到复杂的数据类型，

例如

 <button>设置本地存储</button>
    <button>获取本地存储</button>
    <button>删除本地存储</button>
    <button>干掉所有本地存储</button>
    <script>
        let obj = {
                name: '张三',
                age: 20
            }
            // 获取按钮
        document.querySelector('button:nth-of-type(1)').addEventListener('click', function() {
            // 增加
            // JSON.stringify()把js对象转为JSON字符串类型
            //密钥         值
            //key_1	     {"name":"张三","age":20}
            localStorage.setItem('key_1', JSON.stringify(obj))
        })
        document.querySelector('button:nth-of-type(2)').addEventListener('click', function() {
            // 查找
            // JSON.parse():把JSON字符串转为js对象
            let find = JSON.parse(localStorage.getItem('key_1'))
            console.log(find, typeof find);
        })
        document.querySelector('button:nth-of-type(3)').addEventListener('click', function() {
            // 删除
            localStorage.removeItem('key_1')
        })
        document.querySelector('button:nth-of-type(4)').addEventListener('click', function() {
            // 全部删除本地储存
            localStorage.clear()
        })
    </script>

sessionStorage

用法：跟localStorage 基本相同

sessionStorage与localStorage的区别：

1、生命周期为关闭浏览器窗口。 2、只能在同一个窗口(页面)下数据可以共享。