JS本地存储

发表于 2024/11/19 更新于 2025/02/02

作者 Hacket Zeng

3 分钟阅读

浏览器存储方式: chrome 标准

cookie
SessionStorage
LocalStorage
IndexedDB
WebSQL

localStorage 和 sessionStorage

存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）
浏览器端通与服务器通信每次都携带在 header 中对请求性能有影响不参与不参与不参与 ge` 属性来实现本地存储机制。
相关 API：
xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。
xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。
xxxxxStorage.clear() 该方法会清空存储中的所有数据。
备注：
SessionStorage 存储的内容会随着浏览器窗口关闭而消失。
LocalStorage 存储的内容，需要手动清除才会消失。
xxxxxStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null。
JSON.parse(null) 的结果依然是 null。

localStorage 示例：

  
<!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="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>

</body>

<script>
    function saveData() {
        // 设置一个localStorage
        localStorage.setItem('name', '张三')

        let p = {
            name: '李四',
            age: 20
        }

        // 设置一个对象类型的localStorage
        localStorage.setItem('persion', JSON.stringify(p))
    }


    function readData() {
        // 读取一个localStorage
        let name = localStorage.getItem('name')
        console.log(name)

        // 读取一个对象类型的localStorage
        let persion = localStorage.getItem('persion')
        console.log(JSON.parse(persion))
    }

    function deleteData() {
        // 删除一个localStorage
        localStorage.removeItem('name')

        // 删除所有的localStorage
        localStorage.clear()
    }
</script>

</html>

sessionStorage 示例：

  
<!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>SessionStorage</title>
</head>
<body>
    <h2>SessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
</body>
<script>
    function saveData() {
        // 设置一个sessionStorage
        sessionStorage.setItem('name', '张三')
        let p = {
            name: '李四',
            age: 20
        }
        // 设置一个对象类型的sessionStorage
        sessionStorage.setItem('persion', JSON.stringify(p))
    }
    function readData() {
        // 读取一个sessionStorage
        let name = sessionStorage.getItem('name')
        console.log(name)

        // 读取一个对象类型的sessionStorage
        let persion = sessionStorage.getItem('persion')
        console.log(JSON.parse(persion))
    }

    function deleteData() {
        // 删除一个sessionStorage
        sessionStorage.removeItem('name')

        // 删除所有的sessionStorage
        sessionStorage.clear()
    }
</script>
</html>

front-end, JS

本文由作者按照 CC BY 4.0 进行授权

浏览器存储方式: chrome 标准

localStorage 和 sessionStorage

热门标签