配置在浏览器存储数据的数据库

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们要做的这个 Vue 小应用需要一种存储数据的方法 .. 你可以为应用添加一个后台接口,通过这些后端接口获取或者存储数据 .. 我们暂时先只专注应用的前端 .. 在前端存储数据可以使用浏览器的 Local Storage ..

我们可以直接使用浏览器本身提供的 localStorage 方法去存储还有获取数据 .. 不过这里我打算用一个第三方的库叫 lokijs ..

前面我们已经在页面上嵌入了这个库 .. 现在可以打开 db.js .. 在这个文件里去配置使用 loki 数据库 ..

添加一个 db .. 新建一个 loki 数据库,名字可以是 notes .. 后面再添加一个选项对象 .. 里面具体再配置一下 .. autoload 设置成 true .. autoloadCallback ,自动载入的回调是 databaseInitialize .. autosave ,自动保存设置成 true .. autosaveInterval 自动保存的间隔 .. 3000 毫秒 ..

下面再定义一下 databaseInitialize 这个函数 .. 在它里面可以先用 db 的 getCollection 获取 notes 这个集合 .. loki 是文档类型的数据库,所以它里面的集合就相当于是 SQL 数据库里的数据表 ..

给它起个名字叫 notes .. 下面再判断一下 .. 如果 notes 等于 null ,说明数据库里的 notes 这个集合还不存在 .. 这样我们就可以用一下 db 的 addCollection 去添加一个叫 notes 的集合..

应用里的数据我们都可以放在这个 notes 集合里面去存储 ..

验证

回到浏览器 .. 打开开发者工具 .. Application .. 在 Storage 下面,找到 Local Storage .. 在这个 localhost:3000 这里,你会看到已经存储了一条数据 .. 名字是 notes ,就是我们创建的数据库的名字 ..

Value 里面是具体的值,这个值就是 loki 数据库里的具体的数据 ..

配置在浏览器存储数据的数据库《 Vue.js:应用案例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点