LocalStorage 、 SessionStorage 、Cookie 的区别 面试必问

一、

什么是cookie?

答：Cookie 是由服务器生成并主动发送到客户端的一些加密数据，客户端会将其存储并在后续请求中携带，帮助服务器识别用户验证身份

主要应用以下场景：

• 用户身份的确定（例如：登录在线状态）
• 存储用户偏好设置
• 跟踪用户行为（如广告点击记录）

示例：

   // 设置cookie
      document.cookie = "username=渲不是萱";
      // 设置过期时间
      let timer = +new Date() + 1000 * 10;
      let lost = new Date(timer);
      // 10秒之后过期
      document.cookie = "username=渲不是萱;expires=" + lost.toUTCString();
      // 读取cookie
      console.log(document.cookie);

运行后的图像 

如果没有设置Cookie失效日期,它们仅保存到关闭浏览器程序为止.	   
如果将Cookie对象的Expires属性设置为Minvalue,则表示Cookie永远不会过期.

Cookie存储的数据量很受限制,大多数浏览器支持最大容量为4K,因此不要用来保存数据集及其他大量数据.

由于并非所有的浏览器都支持Cookie,并且数据信息是以明文文本的形式保存在客户端的计算机中,
因此最好不要保存敏感的,未加密的数据,否则会影响网站的安全性

 看一下cookie的工作原理图：

cookie的优点和缺点：

优点：

• 易于控制：计算机中的 Cookie 很容易管理。计算机上的某些浏览器可以选择手动或自动清除 cookie，以便您轻松清除浏览历史记录。任何查看器或文本编辑器都可以使用 cookie 来显示、编辑和删除它们。
• 方便：首先使用 cookie，可以轻松访问您已经访问过的网站，并且它们还可以记住有关表单的信息。其次，如果厌倦了每次使用 cookie 填写地址，可以快速高效地填写地址表格。这适用于大多数在线购物网站，不需要每次都填写地址和电子邮件信息。
• 有效的广告：互联网营销公司还使用 Cookie 来运行针对特定细分市场的营销活动，方法是访问其中的数据，其中包括产品组、地理位置、搜索词和人口统计数据。
• 特定领域：每个网站都有自己的 cookie，因此它们彼此独立。没有任何域网站与其他域共享 cookie。

缺点：

• 隐私：尽管在 cookie 的帮助下，互联网浏览变得更加容易，但侵犯隐私的情况很多。如今，许多网站需要先接受 cookie 才能访问内容，但浏览器仍然很难接受 cookie。cookie 被存储在硬盘中，IP地址被收集，浏览历史和在线活动也成为公众知识。
• 贮存：由于 cookie 存储在硬盘中，很明显它会占用相当多的存储空间。随着 cookie 的累积，浏览器可能启动和运行速度变慢。如果硬盘空间有限，系统可能会滞后或挂起。因此，Mozilla Firefox 和 Internet Explorer 等浏览器具有清除缓存和删除 cookie 的选项。
• 非法活动：本网站收集的个人信息可能会被某些个人和团体用于不择手段的目的。它们可能会出售给外部各方。它们可能被用来侵入社交网络或其他在线账户。最好禁用第三方 cookie 或定期清除缓存。

二、什么是Seeion

答：session在网络应用中称为“会话控制”，是服务器为了保存用户状态而创建的一个特殊的对象。用于存储信息,。

session的存储形式：

 session类似于一个Map，里面可以存放多个键值对，是以key-value进行存放的。key必须是一个字符串，value是一个对象

Seeion 和cookie区别：

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上

看一下示例：

      // 定义数据
      let obj = {
        name: "渲不是萱",
        age: 23,
      };

      // 存进本地存储里面 因为是个对象在存进去的时候需要语义化把对像转成字符串,通过 
      //JSON.stringify转字符串

      localStorage.setItem("yu", JSON.stringify(obj));

      // 取出来的时候在转回来，因为是字符串，取出来的时候在转成对象通过JSON.parse转对象
      let lokk = JSON.parse(sessionStorage.getItem("dsad", obj));
      // 读取
      console.log(lokk, typeof lokk);

运行后的结果：

Seeion:工作原理示图：

seeion的优点和缺点：

优点： 

1. 可以是任何格式，存储量理论上是无限的，数据难以被获取、篡改、不易丢失
2. 可以不用声明就使用，且不用考虑它的释放问题

缺点：

1. 占用服务器资源：session的优点很多，但是它的缺点也是可以引起很大的问题的，可能极大地提高服务器成本。
2. 没有分布式架构，无法支持横向扩展：如果使用一个服务器，该模式完全没有问题。但是，如果它是服务器群集或面向服务的跨域体系结构的话，则需要一个统一的session数据库库来保存会话数据实现共享，这样负载均衡下的每个服务器才可以正确的验证用户身份。
3. 保存下来各种形式的，不方便
4. 过度使用导致代码不可读，不可维护
5. session常用来文件存储的，性能不好

三、

什么是LocalStorage？

答：它可以将数据按照键值对的方式保存在浏览器中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化保存，也就是说locaStorage是永久性存储。

注意点：

LocalStorage的优势在于拓展了Cookie的4 KB限制，并且可以将第一次请求的数据直接存储到本地，其容量相当于一个5MB大小的数据库

不同的浏览器容量不同

目前IE浏览器在8以上版本才支持localStorage

LocalStorage在浏览器的隐私模式下是不可读取的

LocalStorage不能被网络爬虫抓取到

示例;

      // 定义数据
      let arr = ["渲不是萱", "楠不是楠"];
      // 存储本地 因为本地存储（localStorage）只能存储字符串格式的数据 所以存的时候需要JSON.stringify转成字符串
      localStorage.setItem("Array", JSON.stringify(arr));
      // 取出来时再转化回来，一般格式的转化： JSON.parse(); // 将 JSON 格式的字符串转化为 JSON 对象进行处理
      let look = JSON.parse(localStorage.getItem("Array", arr) || []);
      // 读取
      console.log(look); //{0:渲不是萱  , 1：楠不是楠}
      console.log(typeof look); // Object

下面是运行后的代码：

看一下LocalStorage工作原理图：

LocalStorage的优点和缺点：

优点：

一、在存储方面localstorage和sessionStorage具有巨大优势，大小为5M，比cookie大多了，所以可以用localStorage来做一些相对不太会改变的数据缓存或者说可以缓存用户的足迹，换个说法，localStorage是一个小型的数据库。

二、localStorage的值为string类型，这就说明我们在使用的时候要进行类型转换。

 缺点：

一：在浏览器隐私模式下不可读取。

二：不同浏览器无法共享localStorage。

不同浏览器无法共享localStorage,相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

三：localStorage不能被爬虫获取。

四：因为localStorage的本质是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；并且localStorage 是同步的 (会阻塞渲染)。

五：浏览器会在第一个请求的时候就将数据加载到内存中 (浪费用户内存RAM)

三者的应用场景就是：

如果你的应用程序需要在客户端（JavaScript）读取数据，那么LocalStorage或SessionStorage是个不错的选择，因为它们不会浪费带宽在每个HTTP请求中发送数据。

如果你的服务器需要这些数据，那么Cookie可能更适合，因为LocalStorage和SessionStorage需要你以某种方式（如Ajax或隐藏的表单字段等）转发数据。但是，如果服务器每次请求只需要数据的一小部分，那么使用LocalStorage或SessionStorage也许是可以接受的。

得出结论：

Cookie、LocalStorage和SessionStorage各有优缺点，选择使用哪个主要取决于你的应用需要在哪里（客户端还是服务器）读取数据，以及你对数据存储空间和生命周期的需求。在实际应用中，你可能会同时使用Cookie、LocalStorage和SessionStorage，以满足不同的需求。