web当中的WebStorage详解

最新推荐文章于 2023-01-16 17:14:02 发布

向阳菌

最新推荐文章于 2023-01-16 17:14:02 发布

阅读量546

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/m0_68997646/article/details/127711802

版权

1.webstorage详解：

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

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

相关API：

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

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

2.代码示例

一般看代码就懂得一切了，在这里主要是创建一些本地存储的函数，然后点击的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveDate()">点我保存数据</button><br/>
    <button onclick="readDate()">点我读数据</button><br/>
    <button onclick="deleteDate()">点我删除数据</button><br/>
    <button onclick="deleteAllDate()">点我清空数据</button><br/>

    <script>
        let person = {name:"JOJO",age:20}

        function saveDate(){
            localStorage.setItem('msg','localStorage')
            localStorage.setItem('person',JSON.stringify(person))
        }
        function readDate(){
            console.log(localStorage.getItem('msg'))
            const person = localStorage.getItem('person')
            console.log(JSON.parse(person))
        }
        function deleteDate(){
            localStorage.removeItem('msg')
            localStorage.removeItem('person')
        }
        function deleteAllDate(){
            localStorage.clear()
        }
    </script>
</body>
</html>