想找个人做网站,音乐网站建设教程视频教程,拓者设计吧app下载,网站建设与维护经营范围早期Web使用cookie在浏览器端保存数据#xff0c;但存在以下问题#xff1a; cookie的大小限制在4KB 浏览器会限制所有站点在计算机上的存储cookie总数 cookie会随着每次HTTP事务一起发送#xff0c;会浪费一部分带宽 HTML5提供了WebStorage本地存储、IndexedDB本地数据库等… 早期Web使用cookie在浏览器端保存数据但存在以下问题 cookie的大小限制在4KB 浏览器会限制所有站点在计算机上的存储cookie总数 cookie会随着每次HTTP事务一起发送会浪费一部分带宽 HTML5提供了WebStorage本地存储、IndexedDB本地数据库等能够存储更多更复杂的数据。 一、WebStorage WebStorage以Key-Value对的方式存储容量有5M分为两种 永久性的本地存储localStorage可以永久存储在浏览器端 会话级别的本地存储sessionStorage关闭浏览器窗口数据会清空 浏览器支持除了IE7及更早版本其它浏览器均可支持 检查浏览器是否支持 if(typeof(Storage) ! “undefined”) { // 支持 }else { // 不支持 } 操作API 以下方法均用 loaclStorage 或 sessionStorage 调用 getItem(key) sessionStorage.Key 获取值 setItem(key,value) sessionStorage.Key value 设置值 removeItem(key) length 返回key/value列表的长度 key(index) 返回对应索引的key值 clear() 清空存储(删除所有key/value对) 遍历 var se window.sessionStorage; for(var i0;i { console.log({0}{1}\n.format(se.key(i),se.getItem(se.key(i)))); } 事件 当存储区域(localstorage、sessionstorage)被修改时将触发storage事件。注意该事件只会在同源页面触发不会在发生修改的页面触发。 事件对象 StorageEvent target 事件目标(DOM 树中的最大目标) type 事件的类型 bubbles 事件通常是否会出现冒泡 cancelable 事件是否可取消 key 键更改的key oldValue 正在更改键的旧值 newValue 正在更改键的新值 url 键更改的文档的地址 storageArea 受影响的存储对象 示例 window.addEventListener(storage, (e) {}); 二、IndexedDB 与WebStorage使用简单字符串键值对不同IndexedDB是为了能够在客户端储存大量的结构化数据并使用索引高效检索的API。前者适合存储少量的数据对于存储大量结构化的数据则可使用IndexedDB本地数据库。 浏览器兼容性所有主流浏览器都已兼容。 基本概念 数据库IDBDatabase 对象 每个域名(严格的说是协议域名端口)都可以新建任意多的数据库。同一个时刻只能有一个版本的数据库存在 对象仓库IDBObjectStore 对象 每个数据库包含若干个对象仓库类似于关系型数据库中的表格 数据记录 对象仓库保存的是数据记录只有主键和数据体两部分。数据体可以是任意数据类型。 索引 IDBIndex 对象 数据记录的读写和删改都要通过事务完成。事务对象提供error、abort和complete三个事件用来监听操作结果。 事务 IDBTransaction 对象 操作请求IDBRequest 对象 指针 IDBCursor 对象 主键集合IDBKeyRange 对象 打开数据库 var request window.indexedDB.open(databaseName, version); // 如果不存在则创建 open 请求不会立即打开数据库或者开始一个事务 而是返回一个IDBRequest对象这个对象通过error、success、upgradeneeded三个事件处理打开数据库的操作结果。 request.onerror function (event) { console.log(数据库打开报错); }; var db; request.onsuccess function (event) { db request.result; console.log(数据库打开成功); }; // 如果指定的版本号大于数据库的实际版本号就会发生数据库升级事件upgradeneeded request.onupgradeneeded function (event) { db event.target.result; } 通过事件对象的target.result属性拿到数据库实例 三、Web SQL Datebase HTML5 IndexedDB和Web SQL Database都是本地数据库数据存储Web SQL Database数据库要出来的更早然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始就已经注定Web SQL Database数据库是明日黄花。因此在此只做一些了解。 Web SQL Database允许引用程序通过一个异步JavaScript接口访问SQLlite数据库。浏览器兼容性主流浏览器除IE、Edge、Firefox HTML5对Web SQL的操作包含以下3个核心方法 openDatebase用来创建或打开数据库 transaction允许我们执行事务处理 executeSql用于执行SQL语句 1.创建/打开数据库 var db openDatabase(name,version,text,size,callback) 参数数据库名称、版本号、描述文本、数据库大小(字节)、创建回调(非必须) 2.执行事务 db.transaction(function (tx) { // ... tx为transaction对象的引用。 }); 3.写SQL语句 executeSql(sql,[],datahandler,errorhandler) 参数要执行的sql语句sql语句中占位符?对应的参数值执行成功时调用的回调失败时调用的回调 示例 $(function(){ var db openDatabase(data.db,1.0,demo data,1024*1024); if(!db) { alert(该浏览器不支持Web SQL); } db.transaction(function (tx) { // 创建表 tx.executeSql(create table if not exists Demo(uName text null,title text null ,words text null), [],function (tx,result) { /*result返回的结果*/ },function (tx,message) { /*message是错误信息的描述*/ }); // 写入数据 tx.executeSql(insert into Demo(uName,title,words)values(?,?,?),[姓名,标题,内容], function (tx,data) { alert(data) }, function (tx, error) { alert(error) }); // 读取数据 tx.executeSql(select * from deom,[],function (tx, data) { alert(data) }, function (tx, error) { alert(error) }); }); }); 四、Application Cache(应用缓存) HTML5引入了应用程序缓存技术意味着web应用可进行缓存并在没有网络的情况下使用通过创建cache manifest文件可以轻松的创建离线应用。 Application Cache带来的三个优势是① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力缺点是①更新版本后必须刷新一次才会启动新版本 ② 进入离线存储的页面如果不更新版本是会将其当成静态页面不请求 ③ 无法进行灰度发布等策略。 Application Cache和WebStorage在使用上的区别是后者存储非关键性数据做锦上添花的事情前者用于存储静态资源。 使用方法 1.配置manifest文件 ... 2.manifest文件 manifest 文件是简单的文本文件它告知浏览器被缓存的内容(以及不缓存的内容)。 manifest 文件可分为三个部分 ① CACHE MANIFEST - 列出需要缓存的文件(必需) ② NETWORK - 列出不需要被缓存的文件(非必需) ③ FALLBACK- 列出规定当页面无法访问时的回退页面(文件,比如 404 页面非必需) CACHE MANIFEST # 缓存文件爱你 /theme.css /main.js NETWORK: # 不需要缓存的文件 login.jsp FALLBACK: /html/ /offline.html 3.服务器端 manifest文件需要配置正确的MIME-type即 text/cache-manifest必须在web服务器上进行配置。 4.常用API 核心是applicationCache对象有个status属性表示应用缓存的当前状态 0 (UNCACHED): 无缓存 即没有与页面相关的应用缓存 1 (IDLE): 闲置即应用缓存未得到更新 2 (CHECKING): 检查中即正在下载描述文件并检查更新 3 (DOWNLOADING): 下载中即应用缓存正在下载描述文件中指定的资源 4 (UPDATEREADY): 更新完成所有资源都已下载完毕 5 (IDLE): 废弃即应用缓存的描述文件已经不存在了因此页面无法再访问应用缓存 5.JS事件(表示应用缓存的状态的改变) checking : 在浏览器为应用缓存查找更新时触发 error : 在检查更新或下载资源期间发送错误时触发 noupdate : 在检查描述文件发现文件无变化时触发 downloading : 在开始下载应用缓存资源时触发 progress在文件下载应用缓存的过程中持续不断地下载地触发 updateready : 在页面新的应用缓存下载完毕触发 cached : 在应用缓存完整可用时触发 6.更新缓存 1.更新manifest文件2.清除浏览器缓存3.通过JavaScript操作 applicationCache.addEventListener(updateready, function(e) { if (applicationCache.status applicationCache.UPDATEREADY) { applicationCache.swapCache(); //使用新版本资源 window.location.reload(); //刷新页面 } }, false); 6.注意事项 1. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB) 2. 如果manifest文件或者内部列举的某一个文件不能正常下载整个更新过程将视为失败浏览器继续全部使用老的缓存 3. 引用manifest的html必须与manifest文件同源在同一个域下 4. 浏览器会自动缓存引用manifest文件的HTML文件这就导致如果改了HTML内容也需要更新版本才能做到更新。 5. manifest文件中CACHE则与NETWORKFALLBACK的位置顺序没有关系如果是隐式声明需要在最前面 6. FALLBACK中的资源必须和manifest文件同源 7. 更新完版本后必须刷新一次才会启动新版本(会出现重刷一次页面的情况)需要添加监听版本事件。 8. 站点中的其他页面即使没有设置manifest属性请求的资源如果在缓存中也从缓存中访问 9. 当manifest文件发生改变时资源请求本身也会触发更新 7.离线缓存与传统浏览器缓存的区别 1. 离线缓存是针对整个应用浏览器缓存是单个文件 2. 离线缓存断网了还是可以打开页面浏览器缓存不行 3. 离线缓存可以主动通知浏览器更新资源 参考资料 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html https://www.cnblogs.com/LuckyWinty/p/5699117.html https://www.cnblogs.com/yexiaochai/p/4271834.html 原文出处https://www.cnblogs.com/V587Chinese/p/10178833.html
