-
H5离线缓存 -> 兼容性说明查看全部
-
H5离线缓存查看全部
-
webSQL 和 IndexedDB 的浏览器支持查看全部
-
客户端存储：cookie，不安全，不会存太多，污染查看全部
-
服务器端存储方式查看全部
-
三种存储方式查看全部
-
用try{ localstorage.setItem() }catch{ ... } 的方法判断浏览器是否支持本地存储查看全部
-
<script> var src="3.jpg"; function set(key){ var img=document.createElement('img'); img.src=src; //pic加载完，触发回调 img.addEventListener('load',function(){ var imgCanvas=document.createElement('canvas'); imgContext=imgCanvas.getContext('2d'); //确保canvas和pic尺寸一致 imgCanvas.width=this.width; imgCanvas.height=this.height; //渲染图片到canvas中 imgContext.drawImage(this,0,0,this.width,this.height); //用data url 的形式取出 //toDataURL(type)- 返回画布数据，默认类型为 image/png var imgAsDataURL=imgCanvas.toDataURL('image/png'); //保存到本地 try{ localStorage.setItem(key,imgAsDataURL); }catch(e){ console.log('失败:'+e); } },false ); } function get(key){ var srcStr=localStorage.getItem(key); var imgObj=document.createElement('img'); imgObj.src=srcStr; document.body.appendChild(imgObj); } </script>查看全部
-
图片存储查看全部
-
图片存储查看全部
-
H5本地存储注意事项：查看全部
-
H5本地存储注意事项：查看全部
-
若去除离线缓存： 首先注释掉头部定义manifest文件，打开<html>使html结构完整。 然后将server端manifest文件更改名字 代码： <html lang="en" manifest="manifest.appcache"> <!--<html>--> <head> <meta charset="utf-8"> </head> <body> <h1>cache demo</h1> <img src="../img/1.jpg" /> <!--cache文件中：img/1.jpg --> <img src="../img/2.jpg" /> <script> window.addEventListener('load' ,function(e){ window.applicationCache.addEventListener('updateready' , function(e){ console.log(window.applicationCache.status); if(window.applicationCache.status==window.applicationCache.UPDATEREADY){ window.applicationCache.swapCache(); if(confirm('a new version of this site is available. load it ?')){ window.location.reload(); } }else{ console.log('manifest not change ! nothing new to server '); } },false ); },false ); </script> </body> </html>查看全部
-
H5离线缓存？ 可以让web应用在离线下继续使用，通过manifest文件指明需要缓存的资源。 是否在线或离线 navigator.onLine==true 则在线 离线缓存缺陷： 1.更新后，第二次访问（需要刷新）才能得到最新数据； 2.服务端的manifest文件，有一个小的更新，都需要重新下载全部文件到本地缓存。 manifest文件结构(修改版本号标识变更): CACHE MANIFEST #version n.n CACHE #需要缓存的文件 /css/sameple.css NETWORK #每次重新拉取的文件 * FAILBACK #离线下代替文件 /offline.html 如何使用: 头部添加： <html manifest='sameple.appcache'> 并且在server添加mime-type: text/cache-manifest 离线缓存原理图：查看全部
-
indexedDB：一种能在浏览器中持久存储结构化数据的DB，并且为web应用提供了丰富的查询能力。 indexedDB按域名分配独立空间，一个域名下可创建N个DB，一个DB有N个储存空间表，一个存储空间有N个对象数据。 w3c已不在维护Web SQL.查看全部
举报
0/150
提交
取消