为了账号安全,请及时绑定邮箱和手机立即绑定

HTML5存储

难度中级
时长 1小时27分
学习人数
综合评分9.33
104人评价 查看评价
9.6 内容实用
9.2 简洁易懂
9.2 逻辑清晰
  • H5本地存储可以存什么? 1.数组:需要序列化为字符串存入 2.json数据:parse.stringify成字符串可以存入 3.图片:Canvas的toDataURL(image/*)之后变成base64~~一堆编码字符串 4.脚本:ajax-response 拉回来 5.样式文件:同上 使用限制: 子域名之间不能共享存储数据,这是可以使用h5的postmessage来发送信息 超出存储大小之后如何存储(LRU,FIFO)
    查看全部
  • <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>
    查看全部
  • 服务器端存储有四种方式,cache缓存,磁盘文件,数据库,内存里面
    查看全部
    1 采集 收起 来源:关于存储

    2017-06-22

  • 本章需要重新理解重新看。 ---相关资源: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。
    查看全部
  • cindexdb存储结构
    查看全部
  • 实现代码
    查看全部
  • H5离线缓存原理与缺陷(部分缺陷): (1) 若manifest更新,则只有在第二次访问时才能显示更新的内容,第一次仍显示的是原(app cache)缓存中的内容; (2) manifest有更新的时候,是把manifest里指定的文件【全部】重新拉取一次,而不是只拉取修改了的文件;
    查看全部
  • 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最终转换成字符串) 脚本 样式文件 7. 注意事项: (1) 使用前要判断浏览器是否支持;( setItem,然后catch异常;网上有window.localStorage的方法,不好,有的浏览器可以写入,但无法读出 ) (2) 写数据时候,需要异常处理,避免超出容量抛错;(5M) (3) 避免把敏感的信息存入localStorage (4) key的唯一性;(再次存入,会覆盖) 8. localStorage使用限制 (1) 存储更新策略,过期控制 (2) 子域名之间不能共享存储数据;( cookie支持:可以通过document.domain实现 ) (3) 超出存储大小之后如何存储( 用一些比较成熟的算法淘汰一些数据,如:LRU, FIFO ); (4) server端如何取到;( 跟到POST/GET请求相应的参数后面,以达到该目的; cookie是可以取到的,localStorage/sessionStorage是纯客户端存储 ) 9. 使用场景: (1) 利用本地数据,减少网络传输 (2) 弱网络环境下,高延迟,低带宽,尽量把数据本地化
    查看全部
  • 1、在 HTML 页面中引用 manifest 文件 <html manifest = "manifest.appcache"> 2、在服务器添加 mime-type text/cache-manifest。 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源,因此加载速度较快 使用缓存接口可为您的应用带来以下三个优势: 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源,因此加载速度较快 服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源
    查看全部
  • WebSQL和IndexDB的浏览器支持情况 WebSQL在移动端的浏览器支持情况较好,但W3C已不再对其设置标准。
    查看全部
  • localstorage 不删除就永不消失 sessionstorage 重新打开页面或者关闭浏览器就消失了。
    查看全部
  • 早期: cookies userdata(只有IE支持,存储在xml中) html5: localstorage application cache(离线储存) indexedDB html5存储解决案例: 图片存储在客户端 跨域共享客户端缓存 离线web应用 实现客户端的DB
    查看全部
  • indexedDB存储结构
    查看全部
  • 如何处理本地存储期限,和过期数据
    查看全部

举报

0/150
提交
取消
课程须知
具备HTML/CSS、JavaScript、CSS3基础知识。
老师告诉你能学到什么?
通过学习本教程可以熟练掌握每种存储的操作方法;了解每种存储方式的优缺点,以及适用场景;在今后的业务开发中能够灵活运用H5的存储;利用浏览器端存储来优化你的业务。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!