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>
保存
读取
删除
- 当我们点击clear的时候也是一样的删除原理，clear是清空（删除）全部数据
