带你掌握开发者必备的WebStorageAPI,客户端案例细讲-阿里云开发者社区

带你掌握开发者必备的WebStorageAPI,客户端案例细讲

2023-11-01 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 带你掌握开发者必备的WebStorageAPI,客户端案例细讲

localStorage&sessionStorage统称为WebStorage，API相同，掌握一个，即掌握两个，WebStorage 是浏览器提供的一种用于在客户端存储数据的机制。它允许你在用户的浏览器中存储数据，并且该数据在用户关闭浏览器后仍然保留。这意味着即使用户关闭了浏览器，下次打开时仍然可以访问存储的数据，下面以localStorage为例，详细介绍下localStorage哈，后面有简单的综合案例让大家明白这一重点

使用方法

存储数据

要在 localStorage 中存储数据，你可以使用以下步骤：

将数据转换为 JSON 格式（如果需要）。

使用 localStorage.setItem(key, value) 方法将数据存储到本地。

// 示例：存储一个名字
localStorage.setItem('name', '小索奇');
// 示例：存储一个对象
let person = { name: '小索奇', age: 8 };
localStorage.setItem('person', JSON.stringify(person));

读取数据

要从 localStorage 中读取数据，你可以使用以下步骤：

使用 localStorage.getItem(key) 方法获取存储在本地的数据。

如果需要，将从 localStorage 中获取的数据转换为相应的格式（如 JSON）

// 示例：读取名字
let name = localStorage.getItem('name');
// 示例：读取一个对象
let jsonPerson = localStorage.getItem('person');
let person = JSON.parse(jsonPerson);

删除数据

要删除 localStorage 中的数据，你可以使用以下步骤：

// 示例：删除一个名字
localStorage.removeItem('name');
// 示例：清空所有数据
localStorage.clear();

下面是一个包括存储、读取和删除数据的完整示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage示例</title>
</head>
<body>
    <div id="app">
        <h2>localStorage示例</h2>
        <button @click="saveData">保存数据</button>
        <button @click="readData">读取数据</button>
        <button @click="deleteData">删除数据</button>
        <button @click="deleteAllData">清空所有数据</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                // 保存数据到localStorage
                saveData() {
                    // 创建一个包含名字和年龄的对象
                    let person = {
                        name: '张三',
                        age: 20
                    };
                    // 使用JSON.stringify将对象转为JSON字符串
                    let jsonPerson = JSON.stringify(person);
                    // 将JSON字符串存储到localStorage
                    localStorage.setItem('person', jsonPerson);
                    console.log(jsonPerson)
                    // 提示保存成功
                    alert('数据已保存！');
                },
                // 读取localStorage中的数据
                readData() {
                    // 从localStorage中读取JSON字符串
                    let jsonPerson = localStorage.getItem('person');
                    // 使用JSON.parse将JSON字符串转为对象
                    let person = JSON.parse(jsonPerson);
                    // 输出读取的对象
                    console.log('读取的数据：', person);
                },
                // 删除localStorage中的数据
                deleteData() {
                    // 删除指定键的数据
                    localStorage.removeItem('person');
                    // 提示删除成功
                    alert('数据已删除！');
                },
                // 清空所有localStorage数据
                deleteAllData() {
                    // 清空所有数据
                    localStorage.clear();
                    // 提示清空成功
                    alert('所有数据已清空！');
                }
            }
        });
    </script>
</body>
</html>