Web客户端的几种存储方式

常见的浏览器端存储技术有：

cookie    sessionStorage    localStorage     userData     indexDB

服务器端存储技术：

session

一、HTML5 web存储（WebStorage）

HTML5 可以在本地存储用户的浏览数据，不存储在服务器上，可以存储大量数据而不影响网站性能。这些数据只用于用户请求网站数据。

数据以键/值对存在。存储一些不需要和服务器进行交互的数据

客户端存储临时数据的两种对象: localStorage   sessionStorage

1、localStorage:没有时间限制的存储（关闭浏览器，再次打开浏览器，存储的数据依然存在）

2、sessionStorage:针对一个session的数据存储（关闭浏览器窗口，存储的数据清空，即关闭窗口再次进浏览器数据清空了），前进、后退、刷新数据依然存在

3、它们均只能存储字符串类型的对象

4、都是用来存储客户端临时信息的对象

5、不同浏览器无法共享sessionStorage、localStorage中的信息；

相同浏览器不同页面可以共享localStorage中的信息（同协议，同域名，同端口）；但是sessionStorage不行

 localStorage   sessionStorage的用法相同

 1、存储变量

  sessionStorage.setItem('key','value');      //key-是要存储的变量名，value-是变量的值

   localStorage.setItem('key','item');

  2、获取变量的值

  sessionStorage.getItem('key');              //key-是存储的变量名

   localStorage.getItem('key');

   3、删除指定变量

   sessionStorage.removeItem('key');

    localStorage.remove('key');

   4、删除本地存储的所有信息

    sessionStorage.clear();

    localStorage.clear();

   5、获取当前存储的键值对数量

   localStorage.length;

   sessionStorage.length;

注意：localStorage 存储的值只能是字符串 形式。当存储的数据为引用对象，会默认调用对象的toString方法，转为字符串在存储。在存储数组的时候，存储的数据项以“,”隔开，解析的时候需要分解为数组在操作。对于对象，需要JSON.stringify转化在存储，获取数据后用JSON.parse转为对象

1、数组：

localStorage.setItem('testArr',[1,2,3]);
console.log('数组的值：'，localStorage.getItem('testArr'));
//获取数组的第一项的值
console.log('数组的第一项的值:',localStorage.getItem('testArr').split(',')[0]);

 显示结果：

数组的值：1,2,3,4
数组的第一项的值：1

2、对象

var data = {
      'a':2,
      'b':3
};

var dataStr = JSON.stringify(data);
//直接存储对象
localStorage.setItem('testObj',data);
console.log('直接存储对象：'，localStorage.getItem('testObj'));
//存储转化后的变量
localStorage.setItem('test_obj',dataStr);
console.log('转化后存储对象：'，localStorage.getItem('test_obj'));

//重新解析对象

var data = JSOPN.parse(localStorage.getItem('test_obj');

console.log('重新解析对象：',data);

显示结果：

显示结果：

直接存储对象：[object object]
转化后存储对象：{"a":2,"b":3}
重新解析对象：object{a:2,b:3}

二、cookie存储

在H5之前，cookie是主要的存储方式，cookie的存储一般限制在4KB左右，他的主要用途是保存登录信息，可以设置存储的有效期。cookie的生命周期是根据设置的expire时间来控制的。

需要自己写操作函数实现操作：

//设置cookie，name-存Cookie的变量名，value-变量的值，days-有效期
function setCookie(name, value, days) {
    days = days || 30;           //没有设置有效期，默认有效期是30天
    var exp = new Date();        //获取当前日期
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); //设置过期日期
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
}
//获取cookie
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;

}
//删除cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
}

 三、对三者的性能比较

1、 cookie:
数据生命期：可设置失效时间，默认是关闭浏览器后失效
存放数据大小：一般是4KB左右
与服务器端通信：每次都会携带在HTTP请求头里面，如果使用Cookie保存过多数据会带来性能问题
易用性：需要自己封装，源生的Cookie接口不友好

2、sessionStorage
数据生命期：仅在当前会话有效，关闭页面或者浏览器后被清除
存放数据大小：一般5MB
与服务器端通信：仅在客户端保存（浏览器），不参与和服务器的通信
易用性：源生接口可用，也可再次封装，对Object  Array有更好的支持

3、localStorage
数据生命周期：除非被清除，否则永远保留
存放数据大小：一般5MB
与服务器端通信：仅在客户端保存（浏览器），不参与和服务器的通信
易用性：源生接口可用，也可再次封装，对Object  Array有更好的支持

四、应用场景
Cookie：保存登录信息
localStorage：保存购物车信息，游戏数据
sessionStorage:

不要在存储系统中存储敏感信息

五、离线缓存 application cache
应用程序缓存，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中存储数据，可以使用一个描述文件     （manifest file）,列出要下载和缓存的文件，在断网的时候也可以应用