网页记事本：Cookie与LocalStorage

Delighted
711 阅读4分钟

在现代Web开发中，有效地管理前端数据存储是构建高性能、用户体验友好的应用程序的关键。浏览器为我们提供了多种存储数据的方式，其中最常用的两种是Cookie和LocalStorage。本文将深入探讨这两种存储机制的特点、使用场景及它们之间的区别，帮助开发者更好地选择合适的存储策略。

Cookie：传统而灵活的身份认证工具

什么是Cookie？

Cookie是一种由服务器发送到用户浏览器并保存在本地的小型文本数据，格式通常为字符串：key=value; expires=DATE; path=PATH; domain=DOMAIN。每个Cookie都有其特定的作用域（由domain和path定义），并且可以设置过期时间（expires或Max-Age）。由于其与HTTP请求一同发送的特性，Cookie成为了实现“状态保持”、会话管理和用户跟踪的主要技术之一。

image.png

Cookie的特性与应用场景

  • 容量限制：单个Cookie的大小一般限制在4KB左右，且一个域名下的总Cookie数量也有限制，这要求开发者必须谨慎选择存储在Cookie中的数据。
  • 自动发送：每当浏览器向服务器发起请求时，相关域名下的所有未过期Cookie都会被自动附加到HTTP请求头中，服务器据此识别用户状态。
  • 安全性考量：尽管可以设置HttpOnly标志防止JavaScript访问，但Cookie仍存在被篡改和盗窃的风险，特别是未使用HTTPS时。
  • 应用场景：Cookie常用于存储会话ID、用户偏好设置、登录状态等关键但体积不大的信息。例如，维持用户的登录状态，确保在不同页面间浏览时用户无需重复登录。

LocalStorage：客户端数据缓存的新选择

LocalStorage简介

LocalStorage是HTML5引入的一种新的客户端存储技术，它允许在用户的浏览器上存储大量的键值对数据（通常为5MB）。与Cookie不同，LocalStorage是以键值对的格式存储，当中的数据不会随HTTP请求自动发送到服务器，而是完全在客户端进行读写操作。

image.png

特点与应用场景

  • 存储容量：LocalStorage提供了比Cookie大得多的存储空间，适合存储较大量级的非敏感数据。
  • 生命周期：数据持久化存储，除非用户主动删除或使用代码清除，否则即使关闭浏览器也不会丢失。
  • 使用限制：由于不参与网络传输，LocalStorage更适合存储离线数据、用户配置、浏览历史等信息，而非作为身份验证手段。
  • 应用场景：比如，用于缓存新闻列表、用户个性化设置、表单暂存数据等，提升用户体验和应用性能。

Cookie与LocalStorage的区别

  1. 数据类型与接口：Cookie本质上是一串字符串，需要手动分割解析；而LocalStorage通过setItem(key, value)和getItem(key)等方法操作，支持更丰富的数据类型。
  2. 存储容量：LocalStorage的存储空间远大于Cookie。
  3. 数据生命周期：Cookie可以通过设置过期时间来控制生命期；LocalStorage的数据除非被删除，否则长期保留。
  4. 与HTTP请求的关系：Cookie会在每次请求时自动发送到服务器，可能影响性能；LocalStorage则不参与网络通信，更加高效安全。
  5. 适用场景：Cookie适合存储小量的、与服务器交互密切的认证信息；LocalStorage则适用于存储大量客户端数据，如用户界面状态、临时缓存等。

对Cookie简单封装

这里我们使用class关键字是用来定义类，它是ECMAScript 6 (ES6) 引入的一个重要特性，旨在让JavaScript的面向对象编程更为直观和易于理解。使用class关键字可以让你以一种类似于其他面向对象语言（如Java或C#）的方式来组织代码。

setCookie()

传入参数name,value,expires=7，其中expires设置默认值7，如果没有传入该存储数据的生命周期，默认为7天。获取当前时间再加上数据的生命期得到到期时间。

toUTCString()方法是JavaScript中Date对象的一个实例方法，它用于将以本地时间表示的日期转换为一个表示UTC时间（协调世界时，即格林尼治标准时间）的字符串。

setCookie(name,value,expires=7) {
        let expireDate='';
        if(expires){
            const date=new Date();//当前时间
            // console.log(date.getTime());//格林尼治时间
            date.setTime(date.getTime()+(expires*24*60*60*1000));//设置cookie过期时间
            expireDate=`;expires=${date.toUTCString()}`;
        }
        document.cookie=name+'='+value+expireDate+";path=/";
    }

deleteCookie(name) 实现删除只需要将生命期设置为-1。

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

完整代码

class CookieManager {
    constructor() { }
    //es6 函数参数默认值
    setCookie(name,value,expires=7) {
        let expireDate='';
        if(expires){
            const date=new Date();//当前时间
            // console.log(date.getTime());//格林尼治时间
            date.setTime(date.getTime()+(expires*24*60*60*1000));//设置cookie过期时间
            expireDate=`;expires=${date.toUTCString()}`;
        }
        document.cookie=name+'='+value+expireDate+";path=/";
    }


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

}

总结

Cookie和LocalStorage各有千秋，它们的设计初衷和应用场景有着本质的不同。开发者应根据实际需求，合理选择存储策略，以达到既保障数据安全又优化用户体验的目的。随着Web技术的不断演进，理解和掌握这些基础存储机制，对于构建高质量的Web应用至关重要。

avatar
文章
阅读
粉丝