客户端存储方法介绍_客户端保存设置csdn-CSDN博客

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/104921352

介绍三个我们常用的

Local Storage

特点：

只有客户端可以访问
本地永久存储，除非用户从浏览器清除或者使用javascript代码清除，否者不会消失
每个域可以最多存储5MB【个人测试我的chrome版本80.0.3987.132（正式版本）可以存储5.2MB的数据也就是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

特点：

只有客户端可以访问
本地临时存储，在页面会话结束时会被清除。
存储大小与localStorage相同

使用方法和localStorage一样

localStorage与sessionStorage的注意点：

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

Cookie

特点：

服务端和客户端都可以访问
可以设置有效期，过期后将会自动删除。如果不设置则是关闭浏览器后失效
存储大小只有4kb
有存储个数限制。每个浏览器限制不一样。建议20个以内。最多的浏览器可以支持50个。

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

(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)
 })()

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的已使用大小

(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');
})()