首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,062 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,217 阅读
3
nps内网穿透实现外网访问树莓派
32,390 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,119 阅读
5
Typecho-Joe-Theme主题帮助文档
24,549 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,300
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
sessionStorage
的结果
2022-01-11
前端存储之indexDB
{message type="success" content="在讲indexDB之前,先简单说说cookie、localStorage、sessionStorage。"/}cookieCookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+,那以 userData 作为你的 polyfill 的方案是种不错的选择。sessionStoragesessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。 Session 这个词的意思,直译过来是“会话”。它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。DesktopChromeEdgeFirefoxInternet ExplorerOperaSafarilocalStorage4Yes3.5810.54sessionStorage5Yes2810.54MobileAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafarilocalStorageYesYesYesYes10.53.2sessionStorageYesYesYesYesYes3.2cookie、localStorage、sessionStorage异同特性CookielocalStoragesessionStorage数据的生命期一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB一般为5MB与服务器端通信每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题仅在客户端(即浏览器)中保存,不参与和服务器的通信仅在客户端(即浏览器)中保存,不参与和服务器的通信易用性需要程序员自己封装,源生的Cookie接口不友好源生接口可以接受,亦可再次封装来对Object和Array有更好的支持源生接口可以接受,亦可再次封装来对Object和Array有更好的支持{callout color="#4dd4ef"}接下来就开始上重头戏了 —— indexDB{/callout}indexDB{callout color="#ef4d4d"}随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。{/callout}{message type="info" content="通俗地讲,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。"/}indexDB操作说明{anote icon="fa-link" href="https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB" type="success" content="indexDB使用说明"/}创建/打开数据库。在数据库中创建一个对象仓库(object store)。启动一个事务,并发送一个请求来执行一些数据库操作,像增加或提取数据等。通过监听正确类型的 DOM 事件以等待操作完成。在操作结果上进行一些操作(可以在 request 对象中找到){callout color="#f0ad4e"}打开数据库{/callout}var db = null; var request = window.indexedDB.open("MyTestDatabase"); request.onerror = function(event) { // 错误处理 console.log(' 打开数据库报错'); }; request.onsuccess = function(event) { // 成功处理 db = event.target.result; console.log('打开数据库成功'); };{callout color="#f0ad4e"}创建和更新数据库版本号{/callout}如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded。这时通过事件对象的target.result属性,拿到数据库实例。var db = null; request.onupgradeneeded = function (event) { db = event.target.result; }{callout color="#f0ad4e"}新建数据库{/callout}新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。通常,新建数据库以后,第一件事是新建对象仓库(即新建表)。request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = null; if (!db.objectStoreNames.contains('imgLists')) { objectStore = db.createObjectStore('imgLists', { keyPath: 'id' }); // unique name可能会重复 objectStore.createIndex('name', 'name', { unique: false }); } }创建一张叫imgLists的表格,主键是id。{callout color="#f0ad4e"}写入数据{/callout}新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。// new 一个blob对象 var obj1 = {hello: "world"}; var blob = new Blob([JSON.stringify(obj1, null, 2)], {type : 'application/json'}); function add() { var request = db.transaction(['imgLists'], 'readwrite') .objectStore('imgLists') .add({ id: 1, name: '图片1', path: '/static/image', blob: blob}); request.onsuccess = function (event) { console.log('数据写入成功'); }; request.onerror = function (event) { console.log('数据写入失败'); } }{callout color="#f0ad4e"}查询数据{/callout}查询数据也是通过事物完成。function read() { var transaction = db.transaction(['imgLists']); var objectStore = transaction.objectStore('imgLists'); // 用户读取数据,参数是主键 var request = objectStore.get(1); request.onerror = function(event) { console.log('事务失败'); }; request.onsuccess = function( event) { if (request.result) { console.log(request.result); } else { console.log('未获得数据记录'); } }; }{callout color="#f0ad4e"}遍历数据{/callout}遍历数据表格的所有记录,要使用指针对象 IDBCursor。function readAll() { var objectStore = db.transaction('imgLists').objectStore('imgLists'); objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log(cursor); cursor.continue(); } else { console.log('没有更多数据了!'); } }; }{callout color="#f0ad4e"}更新数据{/callout}function update() { var request = db.transaction(['imgLists'], 'readwrite') .objectStore('imgLists') // 主动更新主键为1 .put({ id: 1, name: '图片2', path: '/static/image2'}); request.onsuccess = function (event) { console.log('数据更新成功'); }; request.onerror = function (event) { console.log('数据更新失败'); } }{callout color="#f0ad4e"}删除数据{/callout}function remove() { var request = db.transaction(['imgLists'], 'readwrite') .objectStore('imgLists') .delete(1); request.onsuccess = function (event) { console.log('数据删除成功'); }; } remove();{callout color="#f0ad4e"}创建/使用索引{/callout}索引的意义在于,可以让你搜索任意字段,也就是说从任意字段拿到数据记录。如果不建立索引,默认只能搜索主键(即从主键取值)。objectStore.createIndex('name', 'name', { unique: false });function findIndex() { var transaction = db.transaction(['imgLists'], 'readonly'); var store = transaction.objectStore('imgLists'); var index = store.index('name'); var request = index.get('图片1'); request.onsuccess = function (e) { var result = e.target.result; if (result) { console.log(result); } else { // ... } } }转自 https://www.jianshu.com/p/bb116c7a74b3
2022年01月11日
262 阅读
0 评论
0 点赞