zoukankan      html  css  js  c++  java
  • html5 的存储

      html5提供了很多存储的功能,诸如localStorage,sessionStorage,indexedDB,还有离线缓存等,本次主要介绍离线缓存跟本地存储。

     离线缓存

     使用离线存储可以缓存部分文件在本地,当网络断开的时候还可以照常使用,这个需要一个配置文件,一般这么写:

    < html manifest="test.manifest">
    

      然后你需要在你的文件test.manifest文件里面定义那些内容是需要缓存的,那些是不可以缓存的,(以下代码是从http://www.cnblogs.com/xqhppt/p/4157862.html copy的)

     1 CACHE MANIFEST
     2 #上面一句必须
     3 #v1.0.0
     4 #需要缓存的文件
     5 CACHE:
     6 a.js
     7 b.css
     8 #不需要缓存的文件
     9 NETWORK:
    10 *
    11 #无法访问页面
    12 FALLBACK:
    13 404.html

    值得一提的是缓存的文件是不能使用通配符的,必须一个一个的写出来,然后就可以尝试拔网线了,哈哈。

    locastrage

    这个大家应该用的比较多了,其实很简单,主要就是getItem,setItem,clear等方法,值得一提的事在同源的页面下,locastrage是共享的,同时有一个叫onstorage的事件,额,这个ie跟其他浏览器有点区别,因为ie的这个事件是在document上的,其他的浏览器在windows上面,看个例子:

    1  window.onstorage=function(e){
    2         console.log(e.key+"-"+ e.newValue+ "-"+e.oldValue)
    3 }

    然后,我同时打开两个页面,在其中一个页面上直接设置一个新的key叫testNewKey,于是我打印出如下结果:

    testNewKey-testNewKey-new-null

    我在修改他的值,得到如下结果:

    testNewKey-testNewKey-new2-testNewKey-new

    哈哈,这个东西可以做同源页面不同窗口的通讯使用,目前项目中尚未用到,不过确实很棒的东西,这个比postmessage好玩一点(postmessage支持自己内部的iframe,自己打开的页面,打开自己的页面,用一个自称萝卜的人的说法,自己的孩子,自己的爹,还有肚子里的孩子可以使用postmessage,onstrorage可以支持兄弟的),至于getItem,setItem,removeItem之类的不想在此博客重复了,这个太基本了,就键值对保存。

      最后,值得一提的就是localStorage是有容量限制的,有的浏览器是10M,有的是5M(针对同一个域名,即一个源),这个可以通过try-catch语句去检测是不是已经满了,满了再去存储会报错,这个报错可以catch到的,不过一般的应用很难用完吧,10M的字符串,基本不会用完的。

  • 相关阅读:
    9.3 simulated match
    网络流模版大全
    Treblecross
    ENimEN
    求逆序对的两种方法(树状数组/归并排序)
    树状数组
    计算最短路和次短路条数
    Python3.7版库的安装以及常用方法(十分简单)
    二维线段树(hdu1823)
    流星雨(记忆化搜索)
  • 原文地址:https://www.cnblogs.com/onedayof2010/p/4514921.html
Copyright © 2011-2022 走看看