前端存储考点：LocalStorage与Cookie

Melancolie
658 阅读4分钟

在前端开发中，数据存储是一个非常重要的考点。浏览器提供了多种存储数据的方法，最常用的包括LocalStorage和Cookie。本文将详细探讨这两种存储方式的原理、使用方法及其区别，帮助你更好地理解和应用它们。

LocalStorage

LocalStorage是一种HTML5提供的本地存储方式，可以在浏览器中保存键值对数据。与Cookie不同，LocalStorage的数据不会在每次HTTP请求时被发送到服务器，因而它的存储空间也较大，通常为5MB。

LocalStorage的基本操作

  1. 存储数据：
localStorage.setItem('key', 'value');

image.png 2. 获取数据：

const value = localStorage.getItem('key');

image.png 3. 删除数据：

localStorage.removeItem('key');
  1. 清除所有数据：
localStorage.clear();

LocalStorage的优点

  • 容量大：LocalStorage提供了比Cookie更大的存储空间，通常为5MB。
  • 持久性：存储的数据没有过期时间，除非被显式地删除，否则数据会一直存在。
  • 简单易用：API简单明了，易于使用。

LocalStorage的缺点

  • 数据隐私：由于LocalStorage中的数据可以被JavaScript代码访问，因此需要谨慎处理敏感信息。
  • 同步问题：LocalStorage是同步API，操作时会阻塞主线程，如果存储大量数据可能会影响性能。

Cookie

Cookie是一种较早期的前端存储方式，主要用于在浏览器和服务器之间传递少量数据。Cookie会随每次HTTP请求一起发送到服务器，因此在存储用户身份和会话信息时非常有用。

Cookie的基本操作

设置Cookie

设置Cookie时，可以指定其名称(name)、值(value)、到期时间(expires)、路径(path)和域名(domain)等属性。

//种下一个cookie 由相应的domain种下
document.cookie = "username=jesper; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

其中，domain会自动设置，expires如果没有设置，默认是一个会话时间。

获取Cookie

获取Cookie时，所有的Cookie都会以一个字符串的形式返回。我们可以写一个函数对返回的字符串进行一些处理。

const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

删除Cookie

删除Cookie只需将其过期时间设置为过去的时间。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Cookie的优点

  • 持久性：可以设置到期时间，从而实现持久存储。
  • 自动传输：每次HTTP请求都会自动携带相关Cookie，适合存储用户身份和会话信息。

Cookie的缺点

  • 容量小：每个Cookie的存储容量只有4KB左右，且每个域名最多只能存储20个Cookie。
  • 性能问题：由于每次HTTP请求都会携带Cookie，因此大量Cookie会影响请求性能。
  • 数据隐私：Cookie可以被JavaScript访问，需要小心处理敏感信息。

Cookie的管理

为了更方便地管理Cookie，我们可以创建一个CookieManager类，封装常用的操作方法。

class CookieManager {
    static getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }
    //days设置默认值，默认为7天
    static setCookie(name, value, days = 7, path = '/') {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = `expires=${date.toUTCString()}`;//世界统一时间
        document.cookie = `${name}=${value}; ${expires}; path=${path}`;
    }

    static deleteCookie(name) {
        this.setCookie(name,"",-1);
    }
}

// 设置Cookie
CookieManager.setCookie('username', 'jesper');

// 获取Cookie
console.log(CookieManager.getCookie('username'));

// 删除Cookie
CookieManager.deleteCookie('username');

日期对象与Cookie的expires属性

在设置Cookie时，我们通常需要指定过期时间。JavaScript中的Date对象可以方便地操作日期和时间。

设置Cookie的过期时间

const days = 7;
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = `expires=${date.toUTCString()}`;
document.cookie = `username=JohnDoe; ${expires}; path=/`;

其中getTime方法是拿到日期对象的格里尼治毫秒数，便于计算。再用date.toUTCString()将时间转换为世界时。通过这种方式，我们可以轻松地设置Cookie的过期时间，使得Cookie在指定的天数后自动失效。

总结

存储容量

  • LocalStorage：通常提供5MB的存储空间。
  • Cookie：每个Cookie的存储容量约为4KB，每个域名最多存储20个Cookie。

数据传输

  • LocalStorage：存储的数据不会随HTTP请求发送，适合存储大量数据。
  • Cookie：每次HTTP请求都会携带Cookie，适合存储用户身份和会话信息。

使用场景

  • LocalStorage：适合存储用户数据，如用户偏好设置、离线数据等。
  • Cookie：适合存储用户身份、会话信息等需要与服务器交互的数据。

结语

在前端开发中，选择合适的数据存储方式至关重要。LocalStorage和Cookie各有优缺点，应根据具体需求进行选择。LocalStorage适合存储较大且不需要频繁传输的数据，而Cookie则适合存储需要与服务器交互的用户身份和会话信息。

avatar
文章
阅读
粉丝