正文

揭秘前端本地存储：轻松掌握Cookies、LocalStorage与SessionStorage的实用技巧

/0 浏览量
0807

在前端开发中，本地存储是不可或缺的一部分，它允许我们在用户的浏览器中保存数据，以便在用户的不同会话之间持久化信息。今天，我们就来揭秘三种常见的前端本地存储技术：Cookies、LocalStorage和SessionStorage，并分享一些实用的技巧。

Cookies：老牌存储技术

Cookies 是最传统的本地存储方式，它由服务器生成，发送到用户浏览器，浏览器将其存储下来，之后每次请求网页时都会发送这些信息到服务器。以下是使用Cookies的一些实用技巧：

设置和获取Cookies

// 设置Cookies
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 获取Cookies
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

删除Cookies

// 删除Cookies
function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=-99999999;';
}

LocalStorage：持久化存储

LocalStorage 是 Web Storage API 的一部分，它提供了更大容量的存储空间，并且数据会永久存储，除非被明确删除。以下是LocalStorage的一些实用技巧：

设置和获取LocalStorage

// 设置LocalStorage
function setLocalStorage(key, value) {
  localStorage.setItem(key, value);
}

// 获取LocalStorage
function getLocalStorage(key) {
  return localStorage.getItem(key);
}

删除LocalStorage

// 删除LocalStorage
function deleteLocalStorage(key) {
  localStorage.removeItem(key);
}

SessionStorage：会话存储

SessionStorage 与LocalStorage类似，但它只存储会话数据，即当用户关闭浏览器窗口后数据会被清除。以下是SessionStorage的一些实用技巧：

设置和获取SessionStorage

// 设置SessionStorage
function setSessionStorage(key, value) {
  sessionStorage.setItem(key, value);
}

// 获取SessionStorage
function getSessionStorage(key) {
  return sessionStorage.getItem(key);
}

删除SessionStorage

// 删除SessionStorage
function deleteSessionStorage(key) {
  sessionStorage.removeItem(key);
}

总结

Cookies、LocalStorage和SessionStorage各有优缺点，选择哪种存储方式取决于具体的应用场景。通过本文的介绍，相信你已经对这些技术有了更深入的了解。在实际开发中，灵活运用这些技巧，可以帮助你更好地管理前端数据。

-- 展开阅读全文 --