web前端数据库设计
时间: 2024-04-19 22:19:17 浏览: 17
在Web前端中,常用的数据库有两种:Web Storage和IndexedDB。其中,Web Storage又分为localStorage和sessionStorage两种类型。
1. localStorage:用于长期存储数据,即使关闭浏览器数据也不会丢失。可以通过setItem()方法存储数据,getItem()方法获取数据,removeItem()方法删除数据。
```javascript
// 存储数据
localStorage.setItem("name", "Tom");
// 获取数据
var name = localStorage.getItem("name");
// 删除数据
localStorage.removeItem("name");
```
2. sessionStorage:用于临时存储数据,关闭浏览器后数据会被清除。使用方法与localStorage相同。
3. IndexedDB:用于存储大量结构化数据,支持事务操作和索引查询。使用IndexedDB需要打开数据库、创建对象仓库、添加数据、查询数据等步骤。
```javascript
// 打开数据库
var request = window.indexedDB.open("myDB", 1);
request.onerror = function(event) {
console.log("打开数据库失败");
};
request.onsuccess = function(event) {
console.log("打开数据库成功");
db = event.target.result;
};
// 创建对象仓库
var objectStore = db.createObjectStore("person", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
// 添加数据
var person = { id: 1, name: "Tom", age: 20 };
var request = objectStore.add(person);
request.onerror = function(event) {
console.log("添加数据失败");
};
request.onsuccess = function(event) {
console.log("添加数据成功");
};
// 查询数据
var transaction = db.transaction(["person"], "readwrite");
var objectStore = transaction.objectStore("person");
var request = objectStore.get(1);
request.onerror = function(event) {
console.log("查询数据失败");
};
request.onsuccess = function(event) {
console.log("查询数据成功");
var person = request.result;
};
```