前端面试必考：浏览器中的存储方式

酱菜第一深情
589 阅读8分钟

引言

在JavaScript中，浏览器存储是指一系列的技术和API，允许Web应用程序在用户的浏览器上存储数据。这使得Web应用能够记住用户的信息，即使用户关闭并重新打开浏览器，数据依然可以被保留。

几种存储数据的方法

第一种：localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

接下来，我们来了解一下localStorage.setItem的基本用法

localStorage.setItem（ 'key', 'String'）

左边是一个Key（名字可以随便取），右边是一个字符串，假如想要存储的不是字符串，我们要把其转化为字符串，然后再存储


    localStorage.setItem('keyName', 'theValue'); // 存储数据
     localStorage.setItem('username', 'JohnDoe');   // 示例：存储一个字符串 
     var user = { name: 'JaneDoe', age: 30 };         // 如果你要存储一个对象，首先需要将其转换为字符串
      localStorage.setItem('userData', JSON.stringify(user));

怎么读取存储的数据呢?

localStorage.getItem()

在JavaScript中，读取存储在localStorage中的数据可以通过localStorage.getItem()方法来完成。这个方法接收一个参数，即你之前使用localStorage.setItem()方法存储数据时所用的键名(key)。下面是如何使用localStorage.getItem()的基本示例：


     localStorage.setItem('username', 'JohnDoe');
     localStorage.setItem('age', '30');
       // 读取数据
       var username = localStorage.getItem('username');
       var age = localStorage.getItem('age');
       // 输出读取的数据
        console.log(username); // 输出: JohnDoe
       console.log(age);      // 输出: 30

如果之前存储的数据是JSON对象或数组，那么在读取时，由于localStorage只存储字符串，你需要将字符串转换回原始的JavaScript对象或数组。这可以通过JSON.parse()方法完成：


     // 假设我们之前存储了一个对象
                var user = { name: 'JaneDoe', age: 25 };
                localStorage.setItem('user', JSON.stringify(user));

                // 读取数据并转换回对象
                var storedUser = localStorage.getItem('user');
                var parsedUser = JSON.parse(storedUser);

                // 输出读取和解析后的数据
                console.log(parsedUser.name); // 输出: JaneDoe
                console.log(parsedUser.age);  // 输出: 25

总之，用localStorage.setItem() 存储数据时，需要将其转化为字符串，用localStorage.getItem() 读取数据时，需要将字符串转化为其原存储类型

怎么删除存储的数据呢?

如果你想要删除localStorage中的数据，可以使用localStorage.removeItem()方法。这个方法接收一个参数，即你想要删除的键名。例如：

   localStorage.removeItem('exampleKey');

这将会删除与'exampleKey'相关联的键值对。如果你想要清空整个localStorage，可以使用localStorage.clear()方法

第二种：sessionStorage（也叫会话存储）

sessionStorage和localStorage的用法很相似

使用sessionStorage.setItem()方法来存储数据。这个方法接收两个参数：一个是键（key），另一个是值（value）。值必须是字符串格式。

以下是一个完整的示例，展示了如何使用sessionStorage：

     // 存储数据
        sessionStorage.setItem('username', 'JohnDoe');

        // 获取数据
        var username = sessionStorage.getItem('username');
        console.log(username); // 输出: JohnDoe

        // 删除数据
        sessionStorage.removeItem('username');

        // 检查是否已删除
        var deletedUsername = sessionStorage.getItem('username');
        console.log(deletedUsername); // 输出: null

        // 清空所有数据
        sessionStorage.clear();

第三种：Cookies

举个例子

Cookies就像是你在一家商店购物时，店家给你的一张小卡片。这张卡片上记录了一些关于你的信息，比如你上次购买的商品、你的会员等级或者是你的联系方式。当你再次光顾这家商店时，店家通过这张卡片就能快速识别你是谁，并提供个性化的服务，比如推荐你之前喜欢的商品，或是直接应用你的会员折扣。

cookie 浏览器存储的一些数据的东西, 存放在电脑上， 以各个站点为单位不同浏览器之间,cookie不共用

服务器可以通过HTTP响应头Set-Cookie来创建Cookie。当浏览器接收到这个响应头时，它会解析Cookie的属性并将Cookie保存在本地。Cookie的基本格式如下：

Set - Cookie: name = value; expires = date; path = path; domain = domain; secure; HttpOnly;
  • name=value：定义了Cookie的名称和值。
  • expires=date：指定Cookie的过期日期，如果没有设置，则默认为会话Cookie，会在浏览器关闭时删除。
  • path=path：指定Cookie适用的路径，默认是创建Cookie的页面路径。
  • domain=domain：定义Cookie可以发送给哪些域，这有助于跨子域共享Cookie。
  • secure：表示Cookie只应通过HTTPS连接发送。
  • HttpOnly：表示Cookie不能通过JavaScript脚本访问，增加安全性。

存储Cookie

           var date = new Date().getTime();
            var newDate = new Date(date + 30 * 24 * 60 * 60 * 1000);
            document.cookie = '宇哥=; expires=' + newDate.toUTCString();

这段代码的主要作用是在浏览器中设置一个名为“宇哥”的Cookie，其值为value，并设定这个Cookie在30天后过期。

  1. var date = new Date().getTime();

    • 这行代码创建了一个Date对象，表示当前时间，并通过getTime()方法获取自1970年1月1日以来的毫秒数。这将作为时间计算的起点。

  2. var newDate = new Date(date + 30 * 24 * 60 * 60 * 1000);

    • 这里，我们基于当前时间的毫秒数（date），加上了30天的毫秒数（30 * 24 * 60 * 60 * 1000），计算出了30天后的毫秒数。然后，用这个新的毫秒数创建了一个新的Date对象newDate，它表示30天后的日期和时间。

  3. document.cookie = '宇哥=value; expires=' + newDate.toUTCString();

    • 这行代码设置了一个Cookie，名字为“宇哥”，值为value。expires属性被设置为newDate通过toUTCString()方法转换得到的字符串，表示UTC时间格式下的日期。这样就指定了Cookie的过期时间，即30天后。

获取Cookie

    function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
}

这个函数使用正则表达式来搜索document.cookie中的目标Cookie。这里是简化的步骤：

  1. 构建一个正则表达式，用于匹配以name开头的Cookie值。正则表达式(^| )确保Cookie名称要么在字符串的开始，要么在分号和空格之后（即在另一个Cookie之后）。
  2. 使用match方法在document.cookie字符串中查找匹配项。
  3. 如果找到匹配项（即Cookie存在），match方法将返回一个数组，其中[2]索引处是Cookie的值（不包括名称和等号）。
  4. 使用decodeURIComponent解码Cookie值（因为值可能被URL编码）。
  5. 如果没有找到匹配项，函数返回null。

三种存储方法的比较

Cookies

  • 用途：通常用于身份验证和会话管理，存储小量数据。
  • 存储大小：限制为大约4KB。
  • 生命周期：可以设置过期时间，否则在浏览器关闭时消失。
  • 共享性：在所有同源窗口中共享，随HTTP请求自动发送至服务器。
  • 通信：随每个HTTP请求头发送，增加网络流量。
  • 安全性：可以设置HttpOnly和Secure属性增强安全性。

SessionStorage（会话存储）

  • 用途：临时存储数据，适用于单个浏览器会话。
  • 存储大小：比Cookies大得多，约5MB或更多。
  • 生命周期：数据在浏览器窗口关闭后消失。
  • 共享性：数据仅在当前浏览器窗口和标签页中共享。
  • 通信：数据不随HTTP请求发送到服务器。

LocalStorage

  • 用途：持久存储数据，适用于长期存储需求。
  • 存储大小：与SessionStorage类似，但数据持久存储，除非手动清除。
  • 生命周期：数据持续存在，即使浏览器重启也不会丢失。
  • 共享性：数据在所有同源窗口中共享。
  • 通信：数据也不随HTTP请求发送到服务器。

Cookies 存储数据的空间相对于LocalStorage 和 SessionStorage较小

Cookies 只能存储字符串类型，而 LocalStorage 和 SessionStorage可以存储对象，数组，布尔等类型

但是可以设置存储时间，比较灵活

在用户登录和注册的场景中，Cookies、SessionStorage和LocalStorage可以以不同的方式支持用户会话管理和持久化数据存储。以下是每种存储方式在这些场景中的应用实例：

Cookies

场景: 用户登录

  • 应用: 当用户登录后，服务器生成一个会话ID或JWT（JSON Web Token），并将其存储在Cookie中。这个Cookie可以标记为HttpOnly和Secure，以增加安全性。
  • 目的: 保证用户在跨页面导航时能保持登录状态，同时减轻服务器负担，不需要在每次请求时重新验证用户。

SessionStorage

场景: 表单数据持久化

  • 应用: 在用户注册过程中，如果表单很长，可以使用SessionStorage来暂时存储用户在各个步骤中输入的信息，以便用户在中断或刷新页面后，可以继续从断点处填写表单。
  • 目的: 提升用户体验，避免用户重复输入。

LocalStorage

场景: 用户偏好设置和非敏感信息存储

  • 应用: 用户可以选择记住密码，或者设置自己的界面偏好，如主题颜色、字体大小等。这些信息可以存储在LocalStorage中，即使用户关闭浏览器或重启电脑，设置仍然保留。
  • 目的: 实现持久化的用户界面定制，提升用户体验。

总结

今天，我们简单了解了一下，在Web开发中，浏览器存储技术提供了多种方式来存储数据，以适应不同的应用场景和需求，浏览器存储技术如Cookies、SessionStorage和LocalStorage各有千秋，分别适用于身份验证、临时会话管理和持久数据存储。

制作不易，感谢支持

avatar
文章
阅读
粉丝