嘿，老朋友，今天咱们聊聊如何用indexDB来存数据吧。你可Neng觉得这听起来有点高大上，其实操作起来挺直白的。

在浏览器里想存一堆数据可不一定要去服务器。那怎么办？这时候就Neng用到indexDB，它是浏览器自带的非关系型数据库。

1、Neng存大量结构化数据。 2、支持事务，读写安全。 3、支持索引，查询快。

先说代码： var db = null; var request = indexedDB.open;

request.onerror = function{ console.log; } request.onupgradeneeded = function{ var db = e.target.result; if){ db.createObjectStore; } } request.onsuccess = function{ db = e.target.result; console.log; }

先开个事务： var tx = db.transaction; var store = tx.objectStore;

然后add或者put： store.put;

拿到事务，再取对象：

var getTx = db.transaction; var getStore = getTx.objectStore; getStore.get.onsuccess=function{ console.log; };

alert; var cursorTx= db.transaction; var cursorStore=cursorTx.objectStore; cursorStore.openCursor.onsuccess=function{ var cursor=e.target.result;if{ console.log; cursor.continue; }else{ alert; }};

//先取出来修改再放回去

//获取原记录

//修改属性

//重新写入

//删除操作hen简单

咱说说这个问题。其实有几个原因：

#原因一#：Baidu 的爬虫对 JavaScript 渲染有限制，Ru果页面完全依赖 client‑side JS 动态生成内容，爬虫可Neng抓不到。

#原因二#：Baidu geng倾向于静态内容或者 SSR，动态 SPA 就不太容易被识别。

#原因三#：Baidu 在国内搜索生态里geng注重站内链接和外部链接质量，Ru果你的站点缺少这些，排名自然会落后。

所以Ru果你想让自己的 indexDB 项目被搜到，只Neng把核心内容写成静态页面或者配合 SSR 框架把关键数据预渲染出来。哈哈，这事儿可比直接用 indexDB 存本地文件还麻烦呢。

存图片和文件的玩法 `

var fileTx=db.transaction; var fileStore=fileTx.objectStore; fileStore.put;

然后用 URL.createObjectURL 把 Blob 转成链接：

img.src=URL.createObjectURL;

哈，这样就Neng在页面上直接显示上传的图片啦。

进阶点：索引与过滤`

db.createObjectStore; //加索引 db.createIndex;

js //查询某个日期范围 var index=db.transaction.objectStore.index; index.openCursor).onsuccess=function{ var cursor=e.target.result; if{ //处理 cursor.continue; } }

这玩意儿真的Ke以让你在客户端完成复杂的数据检索，而不用每次dou跑服务器。

坑与小技巧`

事务范围记得不要跨表Zuo事务，否则会报错。

版本升级Ru果改了结构，一定要在 onupgradeneeded 中Zuo相应处理。

空间限制不同浏览器会给你不同的 quota，大概几百 MB 左右，但也不是无限制。

错误处理别忘了监听 onsuccess 与 onerror，尤其是在 deleteDatabase 时。

防止内存泄漏的小建议`

当你拿到 blob 对象时用完后记得 revocable 的 URL.revokeObjectURL，否则占满缓存。

调试技巧小贴士`

Chrome 开发者工具里有 Application -> IndexedDB，你Ke以直接查kan表格里的内容，真方便呀。