客户端存储方法介绍

很多时候我们在做前端开发的过程中需要缓存一些数据到我们客户端。那么就需要了解一下storage方面的知识了。本文将介绍几种不同的缓存方式。

查看有哪些存储方式。

打开我们的控制台 -> Application
我们先来介绍三个我们经常用的：

一、Local Storage

特点：

1. 只有客户端可以访问
2. 本地永久存储，除非用户从浏览器清除或者使用javascript代码清除，否者不会消失
3. 每个域可以最多存储5MB【个人测试我的chrome版本80.0.3987.132（正式版本）可以存储5MB的数据也就是5200000个字节的长度】

使用方法：

// 保存数据到 sessionStorage
localStorage.setItem('key', 'value');
// 如果要传递object或者array之类的话请使用JSON.stringify
localStorage.setItem('key', JSON.stringify({a: 'xx'}))
localStorage.setItem('key', JSON.stringify([1, 2, 3]))

// 从 sessionStorage 获取数据
const data = localStorage.getItem('key');
// 解析obj，arr之类的数据
const objData = JSON.parse(localStorage.getItem('key'));

// 从 sessionStorage 删除保存的数据
localStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
localStorage.clear();

二、Session Storage

特点：

1. 只有客户端可以访问
2. 本地临时存储，在页面会话结束时会被清除。
3. 存储大小与localStorage相同
4. 在当前网站通过a标签新开一个窗口，另外的窗口共享session storage【必须是同源的才会共享(协议域名端口一致)】

使用方法和localStorage一样

localStorage与sessionStorage的注意点：

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

三、Cookie

特点：

1. 服务端和客户端都可以访问
2. 存储的是文本数据，是文本明文的格式
3. 可以设置有效期，过期后将会自动删除。如果不设置则是关闭浏览器后失效
4. 存储容量最大为4KB
5. 有存储个数限制。每个浏览器限制不一样。建议20个以内。最多的浏览器可以支持50个。

弊端：

1. 上方的特点4与特点5都应该算是他的弊端。
2. cookie每次访问页面都会发出一次请求，消耗性能
3. 如果用户端禁用了coojie就会存不进去了【如果系统需要使用请在初始页面进行判断用户端是否禁用了，禁用了给出提示】
4. 安全性问题。如果cookie被别人拦截了，那人就可以取得所有的session信息。即使加密也于事无补，因为拦截者并不需要知道cookie的意义，它只要原样转发cookie就可以达到目的。

使用方法：

保存：

document.cookie = 'key=value;expires=xx;path=yy;domain=zz;secure';
//key   	--cookie名
//value		--cookie值
//expires	--过期时间（失效时间），可选，当不选时，在会话结束失效
//path		--路径，可选，不选时，和当前资源路径保持一致
//domain	--域，可选
//secure	--安全链接，可选

修改：
同路径下同名cookie覆盖保存
删除：
同路径下同名cookie覆盖保存，将失效时间设置为当前时间之前
查询：

document.cookie
//返回当前域下所有的cookie。以";"连接成的字符串

测试cookie是否被客户端禁用了：

function CookieEnable() {
   let result = false;
   if (navigator.cookiesEnabled) return true;
   document.cookie = "testcookie=yes;";
   let cookieSet = document.cookie;
   if (cookieSet.indexOf("testcookie=yes") > -1) result=true;
   document.cookie = "";
   return result;
}
if(!CookieEnable()){
  alert("对不起，您的浏览器的Cookie功能被禁用，请开启");      
}

四、安全方面的考虑

我们需要了解，并不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 当中的。当我们使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，别人就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 storage 肆意妄为。所以千万不要用它们存储敏感数据。

五、三者的应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 适合存储那些基本上不会变化的数据，比如某个版本的信息内容。换一次版本更改一次【这个判断可以和后端商量着做】。

sessionStorage适合存储临时的缓存数据，比如各个页面间的输入输出内容缓存之类的。

六、额外内容

测试storage的容量上限

测试浏览器存储上限的链接：https://arty.name/localstorage.html
当然我们也可以自己写代码测试：

(function() {
   if(!window.localStorage) {
   console.log('当前浏览器不支持localStorage!')
   }    
   let test = '0123456789';
   const add = function(num) {
     num += num;
     if(num.length == 10240) {
       test = num;
       return;
     }
     add(num);
   }
   add(test);
   let sum = test;
   const show = setInterval(function(){
      sum += test;
      try {
       localStorage.removeItem('test');
       localStorage.setItem('test', sum);
       console.log(sum.length / 1024 + 'KB');
      } catch(e) {
       console.log(sum.length / 1024 + 'KB超出最大限制');
       clearInterval(show);
      }
   }, 0.1)
 })()

直接扔到控制台执行即可。

稍等一段时间后我们就发现结果已经出来了：【俩分钟之内】

上面的是测试localStorage。sessionStorage同理也是这么测试，改一下即可：

(function() {
   if(!window.sessionStorage) {
   console.log('当前浏览器不支持sessionStorage!')
   }    
   let test = '0123456789';
   const add = function(num) {
     num += num;
     if(num.length == 10240) {
       test = num;
       return;
     }
     add(num);
   }
   add(test);
   let sum = test;
   const show = setInterval(function(){
      sum += test;
      try {
       sessionStorage.removeItem('test');
       sessionStorage.setItem('test', sum);
       console.log(sum.length / 1024 + 'KB');
      } catch(e) {
       console.log(sum.length / 1024 + 'KB超出最大限制');
       clearInterval(show);
      }
   }, 0.1)
 })()

获取storage的已使用大小

这是localStorage的，sessionStorage的请自行更改代码。

(function(){
    if(!window.localStorage) {
        console.log('浏览器不支持localStorage');
    }
    var size = 0;
    for(item in window.localStorage) {
        if(window.localStorage.hasOwnProperty(item)) {
            size += window.localStorage.getItem(item).length;
        }
    }
    console.log('当前localStorage已使用容量为' + (size / 1024).toFixed(2) + 'KB');
})()

剩余容量那就用上面俩个的结果相减即可得出