-
1、离线缓存（application cache）：让web应用在离线情况下继续使用，通过manifest文件指明要缓存的资源。 2、检测是否在线：navigator.onLine 3、原理（如图）：读取离线缓存，同时检查manifest文件，有更新时更新文件和缓存。 4、缺陷：更新时需要重新拉取manifest中指定的所有文件，占用资源；更新内容会在下次生效。 5、浏览器支持：IE8-不支持。查看全部
-
本章需要重新理解重新看。 ---相关资源：https://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5db/index.html https://github.com/cy0707/about_html http://www.tfan.org/using-indexeddb/#i-19查看全部
-
IndexedDB(以前叫做Web SQL) 定义：一种能在浏览器中持久存储结构化数据的数据库，并为web应用提供了丰富的查询能力。 浏览器支持：PC端：chromw11+，FF4+，IE10+ 移动端：支持不较弱。 存储结构：按域名分配独立空间，一个域名下可创建多个数据库，一个DB可以创建多个对象储存空间（表），一个 对象存储空间可以创建多个对象数据。 Web SQL：在移动端的支持比较好，但是W3C已不再维护Web SQL。查看全部
-
图片储存： <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>查看全部
-
本地储存过期策略demo： <script> function get(key,exp){ var dataStr=localStorage.getItem(key); var dataObj=JSON.parse(dataStr); if(new Date().getTime()-dataObj.time>exp){ console.log('已过期'); }else{ console.log( "data="+dataObj.data); } } function set(key,v){ var curTime=new Date().getTime(); var timeJson={data:v, time:curTime}; //JSON.stringify(obj):对象解析出字符串 localStorage.setItem( key, JSON.stringify(timeJson) ); } </script>查看全部
-
9. 使用场景： (1) 利用本地数据，减少网络传输 (2) 弱网络环境下，高延迟（连接过程长），低带宽（下载率低），尽量把数据本地化。 10.大网站的通常做法： -将样式和脚本本地化，让老用户有更好更流畅的体验，减少用户在空白页停留的时间。 11.注意： -ios无痕模式浏览器不支持Localstroage查看全部
-
H5存储形式： 1. 本地存储( localStorage && sessionStorage) 2. 离线缓存( application cache ) 3. IndexedDB 和 Web SQL 本地存储： 1. localStorage 永久存储，永不失效，除非手动删除 2. sessionStorage 重新打开页面或者关闭浏览器就消失了 3. 本地存储大小：官方给出的文档是，每个域名5M 4. IE8以上支持 5. localStorage API介绍 getItem setItem removeItem key clear 6. 只要能转换成字符串的都能存在localStorage 数组 json数据 图片；(利用canvas最终转换成字符串.使用在图片不经常更改的情况下，不过如果图片bash64比较大的话，会比较浪费资源) 脚本 样式文件 7. 注意事项： (1) 使用前要判断浏览器是否支持；( setItem，然后catch异常；网上有window.localStorage的方法，不好，有的浏览器可以写入，但无法读出 ) (2) 写数据时候，需要异常处理，避免超出容量抛错；(5M) (3) 避免把敏感的信息存入localStorage (4) key的唯一性；(再次存入，会覆盖) 8. localStorage使用限制 (1) 存储更新策略，过期控制（永不过期，常驻浏览器的记录，业务中实现过期的策略，需要自己加）； (2) 子域名之间不能共享存储数据；( cookie支持：可以通过把子域名的document.domain设置成主域名，各个子域名既可以共享数据。可以通过postMessage达到子域名共享localStorage数据的目的)。 (3) 超出存储大小之后如何存储( 用一些比较成熟的算法淘汰一些数据，如：LRU, FIFO )； (4) server端如何取到；( cookie在服务端是可以取到的；localStorage/sessionStorage是纯客户端存储，在服务端取不到，如果要取到， 跟到POST/GET请求相应的参数后面，以达到该目的； )查看全部
-
chrome最新版本查看 cookie方法: F12 ==>Application==>Storage ===>Cookies 服务器端的存储介质：内存（含缓存）、数据库、磁盘文件。 H5之前客户端的存储方式： 1、cookies（http请求头带着，有一定安全问题，大小约在4kb，主域名污染） 2、userdata：仅IE支持 H5存储解决了cookie的问题 1. 解决cookie总数和单个大小的限制(4k 4095B) 2. 解决请求头常带存储信息的问题 3. 解决关系型存储的问题 4. 跨浏览器查看全部
-
存储四种方式： cache，磁盘文件，数据库，内存 cookies的特点： 1、http请求头 会显得臃肿 而且效率相对较低 2、4kb的大小 能存储的比较有限 3、主Domain污染 反问记录或者http请求的时候，会带着主域名的东西，这样随意去存取得话，会造成主域名的污染查看全部
-
早期：cookies userdata html5时代：localstorage，application cache（离线缓存）， indexedDB查看全部
-
IndexedDB实现3查看全部
-
IndexedDB实现2查看全部
-
IndexDB增删改查实现查看全部
-
IndexedDB查看全部
-
图片存储查看全部
举报
0/150
提交
取消