js学习11（客户端存储）

目录

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);
    }

}