前端缓存-数据存储：cookie、Storage、indexedDB

最新推荐文章于 2024-12-31 09:56:10 发布

翻译最新推荐文章于 2024-12-31 09:56:10 发布 · 661 阅读

本文对比了前端数据存储的各种方式，包括cookie、localStorage、sessionStorage和indexedDB。cookie用于身份确认，限制4K，可设置失效期；localStorage和sessionStorage存储量均为5M，前者持久存在，后者只存在于当前会话；indexedDB作为浏览器端数据库，无容量限制，存储持久。同时，文章详细介绍了Storage的基础操作API及监听storage事件的方法，以及indexedDB的打开数据库、创建存储对象和添加数据的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单对比：

1、cookie：4K，可以手动设置失效期
2、localStorage：5M，除非手动清除，否则一直存在
3、sessionStorage：5M，不可以跨标签访问，页面关闭就清理
4、indexedDB：浏览器端数据库，无限容量，除非手动清除，否则一直存在
5、Web SQL：关系数据库，通过SQL语句访问（已经被抛弃）

Cookie通过在客户端记录信息确定用户身份
Session通过在服务器端记录信息确定用户身份

Storage：localStorage、sessionStorage

1、基础操作API

保存数据
localStorage.setItem( key, value );
sessionStorage.setItem( key, value );
读取数据
localStorage.getItem( key );
sessionStorage.getItem( key );
删除单个数据
localStorage.removeItem( key );
sessionStorage.removeItem( key );
删除全部数据
localStorage.clear( );
sessionStorage.clear( );
获取索引的key
localStorage.key( index );
sessionStorage.key( index );

2、监听storage事件

可以通过监听 window 对象的 storage 事件并指定其事件处理函数，当页面中对 localStorage 或 sessionStorage 进行修改时，则会触发对应的处理函数

window.addEventListener('storage',function(e){
   console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})

触发事件的时间对象（e 参数值）有几个属性：
key : 键值。
oldValue : 被修改前的值。
newValue : 被修改后的值。
url : 页面url。
storageArea : 被修改的 storage 对象。

indexedDB

1、打开数据库

var DBOpenRequest = window.indexedDB.open(dbName, version);
dbName是数据库名称，version是数据库版本
打开数据库的结果是，有可能触发4种事件

success：打开成功。
error：打开失败。
upgradeneeded：第一次打开该数据库，或者数据库版本发生变化。
blocked：上一次的数据库连接还未关闭。
第一次打开数据库时，会先触发upgradeneeded事件，然后触发success事件。

var openRequest = indexedDB.open("test",1);
var db;

openRequest.onupgradeneeded = function(e) {
    console.log("Upgrading...");
}
 
openRequest.onsuccess = function(e) {
    console.log("Success!");
    db = e.target.result;
}
 
openRequest.onerror = function(e) {
    console.log("Error");
    console.dir(e);
}

open返回的是一个对象
回调函数定义在这个对象上面
回调函数接受一个事件对象event作为参数，它的target.result属性就指向打开的IndexedDB数据库，也就是说db = e.target.result才算我们真正拿到的数据库

2、创建一个数据库存储对象

var objectStore = db.createObjectStore(dbName, { 
        keyPath: 'id',
        autoIncrement: true
    });

objectStore是一个重要的对象，可以理解为存储对象
objectStore.add()可以向数据库添加数据，objectStore.delete()可以删除数据，objectStore.clear()可以清空数据库，objectStore.put()可以替换数据

使用objectStore来创建数据库的主键和普通字段

objectStore.createIndex('id', 'id', {
        unique: true    
    });

3、向indexedDB数据库添加数据

数据库的操作都是基于事务（transaction）来进行，于是，无论是添加编辑还是删除数据库，我们都要先建立一个事务（transaction），然后才能继续下面的操作
var transaction = db.transaction(dbName, "readwrite");
dbName就是数据库的名称

// 新建一个事务
var transaction = db.transaction('project', "readwrite");
// 打开存储对象
var objectStore = transaction.objectStore('project');
// 添加到数据对象中
objectStore.add(newItem);