-
<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>查看全部
-
chrome最新版本查看 cookie方法: F12 ==>Application==>Storage ===>Cookies 服务器端的存储介质:内存(含缓存)、数据库、磁盘文件。 H5之前客户端的存储方式: 1、cookies(http请求头带着,有一定安全问题,大小约在4kb,主域名污染) 2、userdata:仅IE支持 H5存储解决了cookie的问题 1. 解决cookie总数和单个大小的限制(4k 4095B) 2. 解决请求头常带存储信息的问题 3. 解决关系型存储的问题 4. 跨浏览器查看全部
-
H5-manifest-离线缓存有哪些缺陷? 1.含有manifest属性的当前请求页无论如何都会被缓存 2.更新需要建立在manifest文件的更新,文件更新后需2次刷新页面才能获取新资源 3.更新是全局性的,无法单点更新 4.对于链接的参数变化是敏感的,任何一个参数的修改都会被master重新缓存查看全部
-
如何在在HTML页面引用manifest文件: 1.html引入manifest文件 <html manifest="sample.appcache" > 2.在服务器添加:mine-type text/cache-manifest ../apache/conf/mime.types 文件最后追加: text/cache-manifest appcache查看全部
-
如何检测是否在线? navigator.onLine = true 在线 navigator.onLine = false 离线查看全部
-
--H5本地存储使用有哪些注意事项?-- 1.使用前要判断浏览器是否支持; 2.写数据时,需要异常处理,避免超出容量抛错; 3.避免把敏感的信息存入localstorage 4.key的唯一性 --使用限制-- 1.存储更新策略,过期控制 2.子域名之间不能共享存储数据,这是可以使用h5的postmessage来发送信息 3.超出存储大小之后如何存储(LRU,FIFO) 4.server端如何获取查看全部
-
H5本地存储可以存什么? 1.数组:需要序列化为字符串存入 2.json数据:parse.stringify成字符串可以存入 3.图片:Canvas的toDataURL(image/*)之后变成base64~~一堆编码字符串 4.脚本:ajax-response 拉回来 5.样式文件:同上查看全部
-
localstorage API介绍 1.getItem 2.setItem 3.removeItem 4.key 5.clear查看全部
-
H5的几种存储形式--- 1.本地存储:localstorage/sessionstorage 2.application cache离线缓存 3.IndexedDB 和 Web SQL查看全部
-
客户端存储历程查看全部
-
1、离线缓存(application cache):让web应用在离线情况下继续使用,通过manifest文件指明要缓存的资源。 2、检测是否在线:navigator.onLine 3、原理(如图):读取离线缓存,同时检查manifest文件,有更新时更新文件和缓存。 4、缺陷:更新时需要重新拉取manifest中指定的所有文件,占用资源;更新内容会在下次生效。 5、浏览器支持:IE8-不支持。查看全部
-
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请求相应的参数后面,以达到该目的; )查看全部
-
cookies的特点: 1、http请求头 会显得臃肿 而且效率相对较低 2、4kb的大小 cookie在英文中的意思就是:小甜饼、曲奇饼。这个单词其实已经暗示了cookie技术所能存储的信息量是比较小的 3、主Domain污染 访问记录或者http请求的时候,会带着主域名的东西,这样随意去存取得话,会造成主域名的污染查看全部
-
localstorage API使用注意事项查看全部
-
localstorage API查看全部
举报
0/150
提交
取消