目录

web storage

IndexDB

web storage

### 前言：
(1) web storage方式用于存储简单的数据(字符串或数字)到客户端浏览器，实现对象为sessionStorage和localStorage；
(2) 其中sessionStorage随着浏览器的关闭而销毁，而localStorage在浏览器关闭时不会销毁(所以后者更为常用)；
(3) 通过web storage方式存储的数据在不同页面加载时也会存在；

 

 

### web storage操作
## 添加或修改数据
localStorage.setItem('key1','value1');
sessionStorage.setItem('key1','value1');
## 获取数据
localStorage.getItem('key1');
sessionStorage.getItem('key1');
## 删除数据
localStorage.removeItem('key1');
sessionStorage.removeItem('key1');

 

 

### 总结：
(1) web storage方式存储，就存储时效而言，localStorage更为常用
(2) web storage方式在不同页面都会携带存在，所以存在安全问题

IndexDB

为每个域名分离存储，存储容量大，且可以存储复杂的数据类型，实现持久化存储。是非关系数据库，以键值对形式存储数据。支持事务，是异步操作。

let db;
// 1. 请求打开数据库
const request = window.indexedDB.open('testDB', 1);// 2. 初始化数据库：创建仓库、定义索引
request.onupgradeneeded = function(evt) {/*  监听器：onupgradeneeded初始化数据库或者高版本数据库请求时调用；该方法在onsuccess或onerror之前调用；*/db = evt.target.result;console.log(111,db);// 创建仓库const objectStore = db.createObjectStore('test1', { keyPath: 'id', autoIncrement:true });// 定义索引objectStore.createIndex('t1', 't1', { unique: false });objectStore.createIndex('t2', 't2', { unique: false });console.log('数据库初始化完成，仓库和索引创建成功');
};// 3. 数据库请求监听
// 3.1 请求失败
request.onerror = () =>{console.error('失败，打开数据库')
};
// 3.2 请求成功
request.onsuccess =  () => {db = request.result;console.log('成功，打开数据库');
};// 4. 添加数据
function addData() {const transaction = db.transaction(['test1'], 'readwrite');const objectStore = transaction.objectStore('test1');objectStore.add({ t1: 'joden', t2: 'lisi' });transaction.oncomplete =  () => {console.log('成功，添加数据');};transaction.onsuccess = ()=>{console.log('失败，添加数据');}}
// 5. 查看数据
function displayData() {var data = [];const transaction = db.transaction(['test1'], 'readwrite');const objectStore = transaction.objectStore('test1');objectStore.openCursor().onsuccess =  function(evt){const cursor = evt.target.result;if (cursor) {data.push(cursor.value)cursor.continue();}}// 查看数据objectStore.openCursor().onsuccess = ()=>{console.log(data);}
}
// 6. 删除数据
function deleteData(id){const transaction = db.transaction(['test1'], 'readwrite');const objectStore = transaction.objectStore('test1');let res = objectStore.delete(id);res.onsuccess = ()=>{console.log('成功删除数据',id);}}