客户端存储方法介绍

落日映苍穹つ 2023-07-15 15:12 22阅读 0赞

介绍三个我们常用的

### Local Storage ###

**特点：**

1.  只有客户端可以访问
2.  本地永久存储，除非用户从浏览器清除或者使用javascript代码清除，否者不会消失
3.  每个域可以最多存储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 ###

**特点：**

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

**使用方法和localStorage一样**

**localStorage与sessionStorage的注意点：**

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

### Cookie ###

**特点：**

1.  服务端和客户端都可以访问
2.  可以设置有效期，过期后将会自动删除。如果不设置则是关闭浏览器后失效
3.  存储大小只有4kb
4.  有存储个数限制。每个浏览器限制不一样。建议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的容量上限**

**sessionStorage同理也是这么测试，改一下：**

**获取storage的已使用大小**