前端本地存储怎么使用
时间: 2024-09-13 11:05:16 浏览: 12
前端本地存储是指在用户的浏览器端进行数据的存储,常见的前端本地存储方式主要有两种:Web Storage和IndexedDB。
1. Web Storage:它提供了一种在客户端存储数据的方式,包括了localStorage和sessionStorage两种存储形式。
- localStorage:没有过期时间,除非代码删除或用户清除数据,否则数据会永久存储。
- sessionStorage:当浏览器窗口或标签页关闭时,存储的数据会被清除。
使用方法:
```javascript
// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
// 获取数据
let value = localStorage.getItem('key');
let sessionValue = sessionStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');
// 清除所有存储的数据
localStorage.clear();
sessionStorage.clear();
```
2. IndexedDB:是一个运行在浏览器中的非关系型数据库,它允许你存储大量数据,索引特定字段,并通过JavaScript实现复杂的事务。
使用方法:
```javascript
// 打开数据库
let request = indexedDB.open("myDatabase", 1);
// 请求成功事件
request.onsuccess = function(event) {
let db = event.target.result;
// 数据库操作...
};
// 错误事件
request.onerror = function(event) {
console.error("Database error: " + event.target.errorCode);
};
// 数据库版本变更处理
request.onupgradeneeded = function(event) {
let db = event.target.result;
let objectStore = db.createObjectStore("storeName", { keyPath: "id" });
};
```
Web Storage适合存储少量的数据,而IndexedDB适合存储大量结构化数据且需要复杂查询的情况。