webStorage - Web编程

存储内容大小一般支持5M B左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：

1.xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2.xxxxxStorage.getItem('person');
该方法接受一个键名作为参数，返回键名对应的值。
该方法接受一个键名作为参数，并把该键名从存储中删除。
4.xxxxxStorage.clear()
该方法会清空存储中的所有数据。

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

<body>
    <h2>localstorage</h2>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">清空所有数据</button>
    <script type="text/javascript">
        function saveData(){
            let p = {name:"张三",age:18}
            localStorage.setItem("msg","hello!")
            // JSON.stringify(p):把javascript对象转换为一个字符串
            localStorage.setItem('person',JSON.stringify(p))
        } 
        function getData(){
            msg = localStorage.getItem("msg")
            person = localStorage.getItem("person")
            // JSON.parse(person):解析成javascript对象
            person= JSON.parse(person)
            console.log(msg)
            console.log(person)
        }
        function deleteData(){
            localStorage.removeItem("msg")
        }
        function deleteAllData(){
            localStorage.clear()
        }
    </script>
</body>

<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">清空所有数据</button>
    <script type="text/javascript">
        function saveData(){
            let p = {name:"张三",age:18}
            sessionStorage.setItem("msg","hello!")
            // JSON.stringify(p):把javascript对象转换为一个字符串
            sessionStorage.setItem('person',JSON.stringify(p))
        } 
        function getData(){
            msg = sessionStorage.getItem("msg")
            person = sessionStorage.getItem("person")
            // JSON.parse(person):解析成javascript对象
            person= JSON.parse(person)
            console.log(msg)
            console.log(person)
        }
        function deleteData(){
            sessionStorage.removeItem("msg")
        }
        function deleteAllData(){
            sessionStorage.clear()
        }
    </script>
</body>

## 组件的自定义事件

本文摘自：https://www.cnblogs.com/

webStorage2021-10-20 10:40:33

webStorage
2021-10-20 10:40:33