本地存储webStorage

本地存储

webStorage = localStorage + sessionStorage

1. 存储内容大小一般支持5M左右（不同浏览器可能会有差异）
2. 浏览器通过Window.localStorage 和 Window.sessionStorage 来实现本地存储机制

相关的API

1. xxxxxStorage .setItem (‘key’, ‘value’)
   把键值对的数据添加到存储中，如果键名已经存在，则更新其对应的值
2. xxxxxStorage .getItem (‘key’)
   读取获得该键名对应的值
3. xxxxxStorage .removeItem (‘key’)
   把该键名和对应的值从存储中删除
4. xxxxxStorage .clear (）
   清空存储中所有数据

localStorage

可以写一个小demo来理解：

 <button onclick="saveData()">添加一个本地存储</button>
    <button onclick="readData()">读取一个本地存储</button>
    <button onclick="deleteData()">删除一个本地存储</button>
    <button onclick="clearData()">清空所有本地存储</button>

    <script>
        function saveData(){
            localStorage.setItem('msg','hello')
            localStorage.setItem('msg2',666)
            const obj = {
                name: 'zs',
                age: 18
            }
            localStorage.setItem('msg3',JSON.stringify(obj))
        }
        function readData(){
            console.log(localStorage.getItem('msg'));
            const result = localStorage.getItem('msg3')
            console.log(JSON.parse(result));
        }
        function deleteData(){
            localStorage.removeItem('msg')
        }
        function clearData(){
            localStorage.clear()
        }
    </script>

sessionStorage

<button onclick="saveData()">添加一个本地存储</button>
    <button onclick="readData()">读取一个本地存储</button>
    <button onclick="deleteData()">删除一个本地存储</button>
    <button onclick="clearData()">清空所有本地存储</button>

    <script>
        function saveData(){
            sessionStorage.setItem('msg','hello') // 本地存储的键值对只接收字符串
            sessionStorage.setItem('msg2',666) // 浏览器会自动将数值类型转换成字符串
            const obj = {
                name: 'zs',
                age: 18
            }
            // 对象类型需要用JSON.stringify转换成字符串
            sessionStorage.setItem('msg3',JSON.stringify(obj)) 
        }
        function readData(){
            console.log(sessionStorage.getItem('msg'));
            const result = sessionStorage.getItem('msg3')
            console.log(JSON.parse(result)); // 读取对象类型需要用JSON.parse转换回对象
        }
        function deleteData(){
            sessionStorage.removeItem('msg')
        }
        function clearData(){
            sessionStorage.clear()
        }
    </script>

两者的区别

1. sessionStorage 存储的内容，会随着浏览器窗口关闭消失
2. localStorage 存储的内容，需要手动删除才会消失
3. xxxxxStorage. getItem(‘key’) 如果获取不到对应的value，则返回值为null
4. JSON. parse(null) 的值依然是null

补充cookie

cookie 默认如果不设置有效期，那么他默认是随着窗口关闭而清除；存放的数据大约为4K左右；于服务器通信，每次都会携带在HTTP请求头中。
cookie最大的优点是可以设置过期时间，但是缺点也很明显：

1. 存储数据太小
2. 不易操作，自己操作cookie很麻烦（如果需要操作cookie，可以使用一个插件js-cookie）