览器提供的储存方式常用的有:cookie、localstorage、sessionstorage、IndexedDB、WebSQL、HTTP缓存机制

cookie

1、cookie的作用

cookie有两个主要功能，第一个功能就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态，而第二个功能也就是我们现在也经常使用cookie在客户端存储一些其它的数据

概念： cookie 是浏览器中用于保存少量信息的一个对象

1）以域名为单位的，每个网站的cookie都保存在此网站的域名下，当下一次访问该网站的时候，就可以通过cookie访问保存的消息

2）每个浏览器保存cookie的位置不同，都保存在浏览器内部，可以通过相应的操作查看

3）每个浏览器保存cookie的数量限制不同，一般每个网站下不大于50个，不大于4k。

4）每个网站下的cookie是以分号+空格的形式串联起来的

5）一般直接保存的cookie会在浏览器退出时清空，如果要长期保存，就得设置过期时间，使用expires=Date,卸载设置的cookie后面，使用分号+空格隔开

获取cookie：通过document.cookie可以获取该域名下的所有的cookie组成的字符串，格式为名=值得形式，中间由分号+空格分开，如：“name=张三; age=23”

获取之后使用字符串操作拆分即可得到对应的值

以下是获取cookie的封装方法

    //获取cookie的方法
    function getCookie(cookieName){
        var cookies = document.cookie.split("; ");
        for(var i=0; i<cookies.length; i++){
            var arr =  cookies[i].split("=");
            if(arr[0] == cookieName){
                return arr[1];
            }
        }
    }

设置cookie：通过document.cookie="名=值"的方式即可设置cookie，例如：document.cookie = "name=张三; expires="+new Date(2017,9);

如果要设置过期时间，就在值后面加分号+空格+expires=过期时间对象/过期时间字符串。

以下是分装的设置cookie的方法

    //设置cookie的方法
    function setCookie(key,val,time){ //tiem传入保存的天数 比如说30天过期  
        var nowTime = new Date();

        nowTime.setDate( nowTime.getDate()+time );
        //时间有GMT/UTC世界时间和北京时间相差8小时，而浏览器设置的时候是按标准时间设置的，所以需要转化。
        document.cookie = key+"="+ val +"; expires="+nowTime.toUTCString();
    }

删除cookie相对比较简单，只需要将值清空，并且将过期时间设置为过去即可

封装的删除cookie的方法

    //清除cookie，1、讲值清空，2、设置过期时间比现在还早
    function deleteCookie(key){
        setCookie(key,"",-1);
    }

localStorage与sessionStorage

特点：

1）localStorage和sessionStorage都具有相同的操作方法

2）localStorage长期存放，sessionStorage浏览器关闭时清空

设置值，使用setItem：

//设置值
localStorage.setItem("name","张三");
sessionStorage.setItem("name","李四");

获取值，使用getItem

localStorage.getItem("name");

sessionStorage.getItem("name");

删除值，使用removeItem

localStorage.removeItem("name");

sessionStorage.removeItem("name");

删除所有的值，使用.clear

localStorage.clear();

sessionStorage.clear();

IndexedDB

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引，所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景

IndexedDB的特点

1）键值对储存： IndexedDB 内部采用对象仓库（object store）存放数据，所有类型的数据都可以直接存入，包括 JavaScript 对象，对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误

2）异步： IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的，异步设计是为了防止大量数据的读写，拖慢网页的表现

3）支持事务： IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况

4）同源限制：IndexedDB 受到同源限制，每一个数据库对应创建它的域名，网页只能访问自身域名下的数据库，而不能访问跨域的数据库\

5）储存空间大： IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限

6）支持二进制储存：IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

WebSQL

这是一个关系型数据库，使用的语法是SQL语法，已被淘汰，被indexedDB替代，已经不更新了。

HTTP缓存机制

浏览器缓存有两种：强制缓存和协商缓存

浏览器缓存机制

浏览器发送请求，会先从浏览器缓存中查找【请求结果】和【缓存标识】
浏览器接收数据，会将【请求结果】和【缓存标识】存储在浏览器缓存中

强制缓存（客户端判断规则）

向浏览器缓存中查找请求结果，根据【缓存规则】决定是否使用该结果。

不存在结果和缓存标识，向服务器发请求
存在结果和缓存标识，结果已失效，使用【协商缓存】
存在结果和缓存标识，结果未失效，直接使用（不请求服务器了）

协商缓存（服务器端判断规则）

强制缓存失效后，携带缓存标识请求服务器，服务器根据缓存标识判断是否使用缓存

协商缓存生效，返回304
不生效，返回200和结果

常见的浏览器存储方式