前端必学篇--数据存储（Cookie、Session、LocalStorage、SessionStorage）

Xiaoru_魚
108 阅读4分钟

简介

Cookie、Session、LocalStorage 和 SessionStorage 都是在前端用于存储数据的机制，但它们各自有不同的特点和用途。Cookie 是一种在客户端存储数据的机制，主要用于跟踪用户和存储与用户相关的信息。Session 是服务器端存储的概念，通常用来跟踪用户在应用程序中的状态。在 Web 开发中，通常通过使用 Cookie 来实现会话管理。localStorage、sessionStorage 是 HTML5 提供的一种在客户端存储数据的机制。

Cookie

  • 过期时间：可设置会话cookie或者持久cookie，持久cookie可以设置在一个过期时间，在这之后将会被自动删除，如果不设置过期时间，将会在管理浏览器后删除

  • 作用域：可通过路径和域名来限制作用域

  • 存储方式：储存在用户计算机的文件系统中，通常位于浏览器指定的储存路径下，每个cookie大小通常限制在几KB到几MB之间，不同浏览器有不同的限制，但通常不应该依赖于大容量的存储

  • 与服务器通信：每次 HTTP 请求时，都会自动发送相应的 Cookie 到服务器，可用于客户端与服务器的状态管理。

  • 适用场景：

  1. 存储少量不敏感数据，如用户登录状态、用户偏好设置等
  2. 需要与服务器进行交互，并且数据较小不超过几KB

Session

  • 过期时间：随着用户在应用程序中的活动而存在，通常在用户关闭浏览器或注销时销毁。

  • 作用域：单个用户的多个请求间共享，可以跨同一个用户的多个请求共享，这意味着当用户在应用程序中浏览不同的页面或执行不同的操作时，可以保持他们的登录状态和其他相关数据

  • 存储方式：存储在服务器端，客户端只保存一个会话标识符（session ID）

  • 适用场景：

  1. 用于跟踪用户的登录状态和存储与特定用户相关的会话数据。

LocalStorage

  • 过期时间：数据永久保存，储存的数据没有过期时间，直到通过 JavaScript 删除或浏览器清除

  • 作用域：可以在不同的浏览器窗口和标签页中访问相同的数据

  • 存储方式：以键值对的形式存储在浏览器中，数据以字符串形式存储，支持存储大量数据(通常为 5MB)

  • 与服务器通信：数据存储在客户端，不会自动发送到服务器，需要手动实现数据同步。

  • 适用场景：

  1. 需要长时间存储数据，如用户配置项，本地缓存数据等
  2. 不需要与服务器频繁交互，数据较大且不敏感

SessionStorage

  • 过期时间数据只在当前会话有效，当页面会话结束(关闭浏览器或标签页)时数据被清除

  • 作用域不同页面或标签页之间无法共享数据，每个标签页有自己独立的储存空间

  • 存储方式：以键值对的形式存储在浏览器中，与 LocalStorage 类似，但数据在会话结束时(即浏览器关闭)会被清除

  • 与服务器通信：数据存储在客户端，不会自动发送到服务器，需要手动实现数据同步。

  • 适用场景：

  1. 需要在单个页面会话期保存数据，如页面刷新时保存临时数据，单页应用中的状态管理等

基本使用：

Session

// 启用 Session
session_start();

// 存储数据到 Session
$_SESSION['username'] = 'user123';
$_SESSION['is_logged_in'] = true;

// 访问 Session 数据
echo 'Welcome, ' . $_SESSION['username'];

// 销毁 Session（例如用户注销时）
session_unset();
session_destroy();

Cookie

import Cookies from 'js-cookie';

// 设置
const setCookie() {
    //设置有效期n天
    Cookies.set(key, data, { expires: n }); 

    // 或者设置一个会话 Cookie（浏览器关闭后失效）
    Cookies.set(key, data);
}

// 获取
const getCookie() {
  let username = Cookies.get(key) || ''; 
}

// 删除
const deleteCookie() {
  Cookies.remove(key); 
}

LocalStorage / SessionStorage

// 设置
localStorage/sessionStorage.setItem(key,data);

// 获取
localStorage/sessionStorage.getItem(key);

// 删除
localStorage/sessionStorage.removeItem(key);

localStorage案例

// 保存数据
const save (key,data) =>{
    localStorage.setItem(key,JSON.stringify(data));
}

// 读取数据 
const loadDataFromLocalStorage= (key) => { 
    const data = localStorage.getItem(key); 
    return data ? JSON.parse(data) : null; 
}
avatar
文章
阅读
粉丝