秒客网

常用缓存方式：

一、cookie

　　Cookie（或者Cookies），指一般网站为了辨别用户身份、进行session跟踪而存储在用户本地终端上的数据（通常经过加密）。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成，一般用户保存用户的认证信息。cookie最大长度和域名的个数由不同浏览器决定，具体如下：

浏览器	支持域名个数	最大长度
IE7以上	50个	4095B
Firefox	50个	4097B
Opera	30个	4096B
Safari/WebKit	无限制	4097B

　　不同域名之间的cookie信息是独立的，如果需要设置共享可以在服务器设置cookie的path和domain来实现共享。浏览器端也可以通过document.coolie来获取cookie，并通过js浏览器端也可以方便的读取、设置cookie的值。

 

　　1：cookie的几个字段代表什么（expires、domain、path、secure、HttpOnly）：

　　　　1）expries/max-age：设置cookie的有效时间，也就是过期时间，默认为本次会话即关闭后消失

　　　　　　　　expires是http/1.0协议中的，在新的http/1.1协议中由max-age替代

　　　　　　　　expires是过期时间点，必须为GMT格式的时间（可用new Date().toGMTString()或new Date().toTCSSring()来获得）

　　　　　　　　max-age是时间段，以秒为单位，即失效时刻 = 创建时刻 + max-age

　　　　2）domain、path：域名，两者构成URL，共同限制cookie被哪些URL访问

　　　　　　　　若domain=“baidu.com”，path=“/”，则请求资源（不包括XHR资源）时，只要URL为“baidu.com”的域名或子域名，且路径为“/”或子目录，请求头中都会带cookie信息

　　　　3）secure：只在确保安全的请求中才会发送cookie，即https或者其他安全协议下，默认情况下secure为空

　　　　4）httponly：设置cookie是否能通过js进行访问，js无法设置该选线，由服务器端设置，默认情况下httponly为空

　　

　　2：简单说了下cookie，接下来然我们探讨一下几个问题：（https://segmentfault.com/a/1190000004556040）

　　　　1）cookie应存储什么数据

　　　　2）cookie怎么设置　

　　　　3）cookie为什么会自动添加到http请求的request header中

　　　　4）cookie增删改查

　　3：设置cookie：使用document.cookie，如果不赋值的话，是获取cookie的值（key和value），赋值的话是设置cookie

　　　　　　expires的设置是GMT时间，domain设置是本域名下（在https://www.baidu.com下domain可以设置为.baidu.com），path设置一般为/即可，secure设置写上即可

　　　　　　例：在谷歌浏览器新标签页中设置cookie：document.cookie = "age=123; expires=Sun, 01 Jan 2017 00:00:00 GMT; domain=.google.co.jp; paht=/"

　　4：修改cookie：重新复制即可，但保证domain/path与之前的保持一致，否则会重新创建cookie

　　5：删除cookie：重新设置cookie的过期时间即可，设置过去的时间，比如今天为2016-10-01，设置cookie的过期时间为2016-10-01之前就行

　　注：cookie个别参考文档：http://bubkoo.com/2014/04/21/http-cookies-explained/

　　　　https://github.com/component/cookie/blob/master/index.js

 

二、localStorage

　　localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。

浏览器	最大长度
IE9以上	5M
Firefox 8以上	5.24M
Opera	2M
Safari/WebKit	2.6M

　　值得注意的是，localstorage大小有限制，不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。

　　1：localStorage作为浏览器的一种缓存方式，其存储数据的方式为key-value键值对的方式存在

　　2：localStorage语法API

　　

var ls = window.localStorage;
ls.setItem(key,value);//设置key-value，存储数据
ls.getItem(key);//获取key对应的value值,没有返回null
ls.length;//只读属性，用来获取存储总数
ls.key(index);//获取index位置上的key值
ls.removeItem(key);//移除该key值的整条数据
ls.clear();//清除所有的存储数据

 

　　注：https://github.com/machao/localStorage

 

三、sessionStorage

　　sessionStorage和localStorage类似，localStorage是永久存储，sessionStorage是本次会话存储，其它均类似。

 

四、websql

 

•  Web Sql数据库API实际上不是HTML5规范的组成部分；
• 在HTML5之前就已经存在，是单独的规范；
• 它是将数据以数据库的形式存储在客户端，根据需求去读取；
• 跟Storage的区别是：Storage和Cookie都是以键值对的形式存在；
• Web Sql更方便与检索，允许sql语句查询；
• 让浏览器实现小型数据库存储功能；
• 这个数据库是集成在浏览器里面的，目前主流浏览器基本都支持；

　　websql API主要包含三个核心方法：

• openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
• transaction : 这个方法允许我们根据情况控制事务提交或回滚。
• executeSql : 这个方法用于执行真实的SQL查询。

var db = openDatabase(\'DBname\',\'1.0\',\'DB描述\',2*1024)
        //openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。
db.transaction(function(tx){
   tx.executeSql(\'SQL语句\',[\'用于替代sql语句中？\'],function(s,c){
        //用于处理查询语句查询到的结果
    })
})

　　注：简单sql语句—http://www.uml.org.cn/sjjm/201005132.asp

　　　　(insert into /// select * from xxxx)

五、indexDB

 　IndexDB是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索API。虽然DOM存储对于少量数据是非常有用的，但是他对大量结构化数据的存储就显得力不存心了。IndexDB则提供了这样的一个解决方案。IndexDB分别为同步和异步访问提供单独的API。同步API本来是要用于仅供Web Workers内部使用，但是还没有被任何浏览器所实现。异步API在Web Workers内部和外部都可以使用，另外浏览器可能对IndexDB有50M大小的限制，一般用户保存大量用户数据并要求数据之间有搜索需要的场景。

　　1、异步API

• indexedDB.open：该方法接收两个参数，第一个为打开或新建的数据库名称（不可省略），第二个参数为版本（大于0的正整数，如果忽略该参数，默认为1）；返回IDBOpenDBRequest对象，回调函数定义在该对象上面，回调函数接收一个event作为参数，e.target.result属性就指向打开的indexedDB数据库
  　　打开/新建数据库为异步操作，有时隔事件可能触发：
  
  • success：打开成功。
  • error：打开失败。
  • upgradeneeded：第一次打开该数据库，或者数据库版本发生变化。
  • blocked：上一次的数据库连接还未关闭。
• indexedDB实例对象的方法
  • createObjectStore：该方法为创建存放数据的“对象仓库”需要放在upgradeneeded事件中执行，它接收两个参数，第一个参数为存放数据的对象仓库的名称，第二个参数是一个对象是设置对象仓库的属性（例{keyPath：‘name’}，将name作为键名，键名不可重复；{autoIncrement：true}是否使用自动递增的整数作为键名）；注：创建对象仓库时，如果已存在，会报错。
  • objectStoreNames：该属性返回一个DOMStringList对象，包含所有对象仓库名称，可以使用该对象的contains方法判断是否包含某个对象仓库。（先判断是否存在，在绝对是否创建）
  • transaction：该方法用于创建一个数据库事务，对数据库进行读写操作，必须先创建数据库事务。
    　　该方法接收两个参数，第一个参数为数组，数组中是本次操作所涉及的对象仓库，第二个参数是表示操作类型的字符串“readonly”（只读）和readwrite（读写）
    　　该方法返回一个事务对象，该对象的objectStore方法用于获取指定的对象仓库
    　　该方法有三个事件，可用来定义回调函数
    
    • • abort：事务中断。
      • complete：事务完成。
      • error：事务出错。
  　　　　　事务对象有以下方法，用于操作数据
  
  • • • add：添加数据，两个参数，第一个为对象，即要添加的数据对象，第二个参数可选，对应的键名
      • get：读取数据，一个参数
      • put：更新数据，两个参数，和add一样
      • delete：删除数据，一个参数，指定键名
      • openCursor：遍历数据，异步方法，回调函数接收事件对象作为参数，该对象的target.result指向数据对象
  • createIndex：该方法用于创建索引，假设仓库中的数据对象为如下person类型：
    

    var person = {
    name:name,
    email:email,
    created:new Date()
    }

    可以指定这个数据对象的某个属性来建立索引
    

    var stor = db.createObjectStore(\'people\',{autoIncrement:true});
    stor.createIndex(\'name\',\'name\',{unique:false});
    stor.createIndex(\'email\',\'email\',{unique:true});

     

    createIndex方法接收三个参数，第一个为索引名称，第二个是建立索引的属性名，第三个为参数对象，用来设置索引特性。unique表示索引所在的属性是否有唯一值，上面代码表示name属性不是唯一值，email属性是为一值。
  • index：有了索引之后就可以针对索引所在的属性读取数据。index方法用于从对象仓库返回指定的索引。
    

    var t = db.transaction([\'people\'],\'readonly\');
    var stor = t.objectStore(\'people\');
    var index = store.index(\'name\');
    var request = index.get(name);

     

    上面代码打开对象仓库之后，先用index方法指定索引在name属性上，然后用get方法读取某个name属性所在数据。如果没有指定索引的那一行代码，get方法只能按照键名读取数据，而不是按照name属性读取数据。需要注意的是，这时get方法有可能取回多个数据对象，以为name属性没有唯一值。另外get是异步方法，读取成功后，只能在success事件的回调中处理数据。
    
  • IDBKeyRange对象
    索引的有用之处，还在于可以指定读取数据的范围。这需要用到浏览器原生的IDBKeyRange对象。
    IDBKeyRange对象的作用是生成一个表示范围的Range对象。生成方式有四种：
    
    • lowerBound方法：指定范围上限
    • upperBound方法：指定范围上限
    • bound方法：指定范围上下限
    • only方法：指定范围中只有一个值
      

      //  all keys <= x
      var r1 = IDBKeyRange.upperBound(x);
      
      //  all keys < x
      var r2 = IDBKeyRange.upperBound(x,true);
      
      //  all keys >= y
      var r3 = IDBKeyRange.lowerBound(y);
      
      //  all keys > y
      var r4 = IDBKeyRange.lowerBound(y,true);
      
      //  all keys >= x && keys <=y
      var r5 = IDBKeyRange.bound(x,y);
      
      //  all keys > x && keys <y
      var r6 = IDBKeyRange.bound(x,y,true,true);
      
      //  all keys = z
      var r7 = IDBKeyRange.only(z);

       

      前三个方法（lowerBound、upperBound、bound）默认包括端点值，可以传入一个布尔值，修改这个属性。
      生成Range对象之后，将他们作为参数输入openCursor方法，就可以在所设定的范围内读取数据
      

      var t = db.transaction([\'people\'],\'readonly\');
      var store =t.objectStore(\'people\');
      var index = store.index(\'name\');
      
      var range = IDBKeyRange.bound(\'B\',\'D\');
      index.openCursor(range).onsuccess = function(e){
         var cursor = e.target.result;
         if(cursor){
            console.log(cursor.key + ":")  
            for(var field in cursor.value){
                console.log(cursor.value[field]);
            }
             cursor.continue();//将指针指向下一个数据，如果已经是最后一个了，则指向null
          }     
      }       

　　注：参考教程http://javascript.ruanyifeng.com/bom/indexeddb.html

基本淘汰以及兼容性较差的几种缓存方式

一、flash缓存

二、HTTP缓存

三、application cache

四、cacheStorage

 

 

文章部分内容转载http://jixianqianduan.com/frontend-javascript/2015/12/28/nine-browser-cache-methods.html