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是清空(删除)全部数据