Web客户端的几种存储方式

灰太狼 2022-06-08 13:18 1374阅读 0赞

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

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）,列出要下载和缓存的文件，在断网的时候也可以应用