-
本地储存过期策略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>查看全部
-
图片储存： <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的几种存储 (1).本地存储(localstorage & sessionstorage) (2).离线缓存(application cache) (3).IndexdDB和Web SQL 本地存储 (1)存储形式： key-->value (2)过期策略： localstorage可以永久存储，除非手动delete。 sessionstorage关闭浏览器或重新打开标签页面时消失。 (3)大小：官方称每个域名5M (4)可以存储: 序列化的数组、脚本、json数据、样式文件、图片(canvas中间转义层，注意跨域问题可尝试img.crossOrigin = ''; ) localstorage API介绍 -getItem取记录 如：localStorage.getItem('name') -setItem设置 如：localStorage.setItem('name','tom') -removeItem移除 如：localStorage.removeItem('name') -key索引 如： 如：localStorage.key(0) -clear全部删掉 如：如：localStorage.clear() H5本地存储使用注意事项： 1.使用前要判断浏览器是否支持（无痕模式不支持/一些奇葩浏览器不支持,通常setItem异常捕获比window.localstorage靠谱） 2.写数据时候，需要异常处理，避免超出容量抛错（单个域名，容量5M） 3.避免把敏感的信息存入localstorage 4.key的唯一性（同key后边的会覆盖前边的） H5本地存储使用限制： 1.永久保存，需要自己写存储更新策略，过期控制。 2.子域名之间不能共享存储数据(跨域问题),可通过H5的postMessage解决。 3.超出存储大小之后如何存储(LRU,FIFO淘汰旧数据) 4.若server端要取到，这需要手工放入post或get请求中。 H5本地存储使用场景： 1.更新频率低的数据，可以利用本地存储，减少网络传输 2.弱网络环境下，高延迟，低带宽，尽量把数据本地化查看全部
-
H5优点： 1.解决4k大小问题 2.解决header常带存储信息的问题 3.解决关系型存储问题 4.可以跨浏览器查看全部
-
1.服务器端的存储方式： 1)cache(缓存) 2)磁盘文件 3)数据库 4)内存 2.cookie缺点 1)http请求头会携带cookie 2)大小限制4k 3)主Domain污染(主域名与子域名同时存储)查看全部
-
早期： cookies userdata(只有IE支持，存储在xml中) html5： localstorage application cache(离线储存) indexedDB html5存储解决案例： 图片存储在客户端 跨域共享客户端缓存 离线web应用 实现客户端的DB查看全部
-
indexedDB查看全部
-
离线缓存的原理查看全部
-
HTML5的集中存储方式 1、本地存储 localstorage sessionstorage API localstorage sessionstorage 存储形式：key--->value 过期：localstorage永久存储，永不失败，除非手动删除.sessionstorage关闭浏览器或重新打开页面时消失 大小：官方给出的文档时每个域名5M，比cookies多 支持情况：主流浏览器 使用方法：localstorage API介绍 -getItem去记录 -setItem设置 -removeItem移除 -key索引 -clear全部删掉 localstorage可以存储：数组 json数据 图片（canvas中间转义层，注意跨域问题） 脚本 样式文件 使用注意事项： --使用前要判断浏览器是否支持 ---写数据的时候，需要异常处理，避免超出容量抛错 ---避免把敏感的信息存入localstorage --=key的唯一性 使用限制： ---存储更新策略，过期控制 ---子域名之间不能共享存储数据 ---超出存储大小之后如何存储（LRU , FIFO） ---server端如何取到（跟在post或请求后面） 2、离线缓存application cache 3、IndexedDB和web SQL查看全部
-
cookies: 缺点：http请求头上都会带着。大小4K。主domain污染。查看全部
-
.....查看全部
-
本地存储图片 代码示例查看全部
-
存储方式查看全部
-
H5存储的劣势 1，浏览器兼容问题 2，同源限制 3，脚本控制，H5存储都是存在浏览器本地，由脚本控制、访问，服务器端如果想访问，挺难； 4，更新策略，不像cookie那样有过期时间，得自己控制。查看全部
-
H5离线缓存 适用场景： 1，单地址页面 2，对实时性要求不高 3，离线webAPP查看全部
举报
0/150
提交
取消