WebStorage

1.存储内容大小一般支持5MB作用（不同浏览器会存在差异）

2.浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

3.相关API:

1. xxxxxStorage.setItem('key', 'value');
   该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2. xxxxxStorage.getItem('person');

   该方法接受一个键名作为参数，返回键名对应的值。

3. xxxxxStorage.removeItem('key');

   该方法接受一个键名作为参数，并把该键名从存储中删除。

4. xxxxxStorage.clear()

   该方法会清空存储中的所有数据。

4.备注：

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

代码示例：

<h2>localStorage</h2>
    <button onclick="saveData()">点击保存数据</button>
    <button onclick="readData()">点击读取数据</button>
    <button onclick="deleteData()">点击删除数据</button>
    <button onclick="clearAllData()">点击清空数据</button>
    <script>
        let p = { name: "张三", age: 18 }
        function saveData() {
            localStorage.setItem('msg', 'hello')
            localStorage.setItem('msg2', 666)
            localStorage.setItem('person', JSON.stringify(p))
        }
        function readData() {
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg2'));
            let result = localStorage.getItem('person')
            console.log(JSON.parse(result));
        }
        function deleteData(){
            localStorage.removeItem('msg')
        }
        function clearAllData(){
            localStorage.clear()
        }
    </script>