localStorage,sessionStorage和cookie的使用

the_flash
81 阅读2分钟
  1. 它可以将数据存储在浏览器中，即使用户关闭了浏览器窗口，数据也不会丢失。localStorage使用简单，可以存储字符串类型的数据，也可以存储对象类型的数据，而且存储的数据大小通常比cookie更大
  2. 和localStorage相比，sessionStorage的存储时间更短，但是它的数据范围更小，更适合存储和管理会话期间的数据。在实际开发中，我们可以根据具体的需求选择localStorage或sessionStorage来管理本地存储的数据。 3.以下获取 设置 删除localStorage(sessionStorage)的方法

获取本地存储

function getStorage(key) {
  const value = localStorage.getItem(key);
  try {
    return JSON.parse(value);
  } catch (e) {
    return value;
  }
}

设置本地存储

function setStorage(key, value) {
  if (typeof value === "object") {
    value = JSON.stringify(value);
  }
  localStorage.setItem(key, value);
}

删除本地存储

function removeStorage(key) {
  localStorage.removeItem(key);
}

cookie（HTTP cookie）是一种在客户端存储数据的小文件，它通常由服务器通过HTTP协议发送给浏览器，浏览器将cookie保存在本地，以便下次访问同一网站时使用。cookie可以存储较小的文本数据，通常大小不超过4KB，但是它不适合存储大量数据，因为每次请求都会携带cookie信息，会增加网络请求的数据量，降低网页加载速度。

cookie的主要特点如下：

  1. 容量较小：cookie通常只能存储4KB左右的数据，不能存储大量数据。
  2. 持久性可配置：cookie可以设置过期时间，可以在浏览器关闭后依然存在。
  3. 安全性较低：cookie存储在浏览器中，容易被恶意代码或第三方应用程序访问，从而导致安全问题。
  4. 与服务器有关：cookie是由服务器发送给浏览器的，每次请求都会携带cookie信息，增加了服务器的负担。

以下是获取 设置 删除cookie

获取cookie

function getCookie(key) {
  const name = key + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieArr = decodedCookie.split(";");
  for (let i = 0; i < cookieArr.length; i++) {
    let c = cookieArr[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

设置cookie

function setCookie(key, value, days) {
  const expires = new Date();
  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie =
    key + "=" + encodeURIComponent(value) + ";expires=" + expires.toUTCString();
}

删除cookie

function deleteCookie(key) {
  document.cookie = key + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
}
avatar
文章
阅读
粉丝