前端本地存储方案

2024-07-11 07:15| 来源: 网络整理| 查看: 265

前言

前端有多种本地存储方案可供选择，常见的有：

Cookie：小型的文本文件，存储少量数据Web Storage ：包括：localStorage和sessionStorage，存储数据有上限（5M）左右IndexedDB：一种高级的客户端存储API，存储量大、高版本浏览器兼容性较好

这些本地存储方案各有优缺点，近期发现一种前端本地存储的库 localForage，遵循“渐进增强”或“优雅降级”的原则，集合以上多种方式，使用异步API封装了Web Storage、IndexedDB和WebSQL的库，提供了简单易用的方法来存储和检索数据，API 相对简单，易于上手，下面开始正式介绍localForage用法。

localForage

localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储（IndexedDB 或 WebSQL）和简单的类 localStorage 的 API ，localForage 能改善 Web 应用的离线体验。

在不支持 IndexedDB 或 WebSQL 的浏览器中，localForage 使用 localStorage。

github地址： https://github.com/localForage/localForage API文档：https://localforage.github.io/localForage/#data-api-setitem

第一种使用方法

安装引入 // 通过npm安装 npm install --save localforage // 引入 import localforage from 'localforage' // 或通过 bower 引入创建indexedDB const firstIndexedDB = localforage.createInstance({ name: 'myFirstIndexedDB', // 支持config所有配置 // storeName: 'keyvaluepairs', // 仅接受字母，数字和下划线 }) 存值 //存储字符串 firstIndexedDB.setItem("data1", "今天是个好日子"); //存储对象 firstIndexedDB.setItem("data2", {a:1,b: 2}); //存储数组对象 firstIndexedDB.setItem("data3", [{a:1,b: 2}, {a:2,b:3}, {a:3,b:4}]);

请添加图片描述 4. 取值（由于indexedDB的存取都是异步的，建议使用 promise.then() 或 async/await 去读值，如果 key 不存在，getItem() 将返回 null。）

//第一种方法 firstIndexedDB.getItem('data1').then(value=> { console.log("数据data1",value); }).catch(err => { console.log('错误信息', err) }); firstIndexedDB.getItem('data2').then(value=> { console.log("数据data2",value); }).catch(err => { console.log('错误信息', err) }); //第二种方法 try { const value = await firstIndexedDB.getItem('data3'); console.log("数据3",value); } catch (err) { console.log('错误信息', err) }

请添加图片描述 5. 删除

//输入key值 firstIndexedDB.removeItem('data3'); 重置清空数据库 firstIndexedDB.clear(); 获取数据库存储key的数量 firstIndexedDB.length().then(numberOfKeys=> { // 输出数据库的大小 console.log("数据库长度",numberOfKeys); }).catch(function(err) { console.log("出错",err); });

请添加图片描述 8. 根据key的索引获取名称

firstIndexedDB.key(2).then(keyName=> { // key 名 console.log("key 名",keyName); }).catch(function(err) { console.log("出错",err); });

请添加图片描述 9. 获取数据库所有key值

firstIndexedDB.keys().then(function(keys) { console.log("所有key集合",keys); }).catch(function(err) { console.log("出错",err); });

请添加图片描述 10. 迭代循环打印所有key-value值

firstIndexedDB.iterate(function(value, key, iterationNumber) { // 此回调函数将对所有 key/value 键值对运行 console.log([key, value,iterationNumber]); }).then(function() { console.log('迭代完成'); }).catch(function(err) { console.log("出错",err); });

请添加图片描述 11. 提前退出迭代循环

firstIndexedDB.iterate(function(value, key, iterationNumber) { // 此回调函数将对所有 key/value 键值对运行 if (iterationNumber { // 当 localforage 将指定驱动初始化完成时，此处代码运行 console.log(localforage.driver()); //返回正在使用的驱动的名字 "asyncStorage" }).catch( e=> { console.log(e); // `No available storage method found.` // 当没有可用的驱动时，`ready()` 将会失败 }); 判断浏览器是否支持driverName 返回布尔值 console.log(localforage.supports(localforage.INDEXEDDB));

【本文地址】

前端本地存储方案

前端本地存储方案

今日新闻

推荐新闻