在这里插入图片描述

文章目录

本地存储是什么
Cookies
- js中如何使用Cookies
localStorage
- js中如何使用localStorage
sessionStorage
- js中如何使用sessionStorage

本地存储是什么

本地存储是指将数据保存在用户的本地设备上，以供后续使用和访问。通过本地存储，网页和应用程序可以在用户关闭浏览器或重新打开页面后仍能保留之前保存的数据。

常见的本地存储方式包括：

Cookies（Cookie）：Cookie是一小段文本信息，由服务器发送到浏览器并存储在用户的计算机上。它们通常用于跟踪和识别用户，并存储少量数据。Cookies可以设置到期时间，在过期之前保持有效。然而，每次HTTP请求都会将Cookie发送给服务器，可能影响性能。

Web Storage（Web存储）：Web Storage提供了两个对象用于在浏览器中保存数据：localStorage和sessionStorage。这些对象允许开发人员使用键值对的方式存储字符串数据。与Cookie不同的是，Web Storage的数据存储在客户端而不是在每个HTTP请求中传输给服务器。其中，localStorage中的数据没有过期时间，除非手动清除，否则会一直保留；而sessionStorage中的数据只在当前会话（关闭标签页或浏览器后失效）中有效。

IndexedDB（索引数据库）：IndexedDB是一种内置的浏览器数据库，它允许你在浏览器中存储和检索大量的结构化数据。它提供了一个异步API，可以进行高性能的数据操作，支持事务和索引等功能。

Cache Storage（缓存存储）：缓存存储是用于存储已下载的资源的缓存区域，包括HTML、CSS、JavaScript文件、图像等。它可以提供离线访问能力，并加快页面加载速度。

需要注意的是，由于本地存储是在用户设备上进行的，因此存储的数据量有限，通常在几兆字节到几百兆字节之间。在使用本地存储时，应考虑数据安全性和隐私保护，避免存储敏感信息。

在Web开发中，根据具体需求和浏览器兼容性，可以选择合适的本地存储方式来保存和获取数据。

Cookies

Cookie是一种在浏览器和服务器之间传输的小型文本文件，用于存储特定网站的用户会话数据。它由服务器通过HTTP响应头中的"Set-Cookie"标头发送给浏览器，并在随后的请求中通过"Cookie"标头返回给服务器。

以下是关于Cookie的详细说明：

数据存储和格式： Cookie以键值对（key-value）的形式存储数据，每个Cookie都具有一个名称和一个对应的值。例如，一个名为"username"的Cookie可能具有值"JohnDoe"。每个Cookie还可以包含其他属性，如过期时间、域名、路径和安全标志等。
跨域限制： Cookie受到同源策略的限制。这意味着Cookie只能由创建它的域名所设置和访问。不同域名下的页面无法直接访问彼此设置的Cookie。然而，可以通过服务器端的设置来实现跨域共享Cookie的方式，如将Access-Control-Allow-Origin标头设置为允许访问的域名。
可选属性： Cookie还可以设置一些可选属性来控制其行为：
过期时间（Expires或Max-Age）：指定Cookie的有效期限，可以是一个日期/时间表示或相对于当前时间的秒数。
域名（Domain）：指定哪些域名可以访问Cookie。
路径（Path）：指定哪些路径下的页面可以访问Cookie。
安全标志（Secure）：如果设置为true，则Cookie只能通过安全的HTTPS连接传输。
HTTP Only标志（HttpOnly）：如果设置为true，则Cookie不能被JavaScript代码访问，这有助于防止跨站点脚本攻击。
使用场景： Cookie通常用于以下几个方面：
会话管理：通过存储用户的会话标识符（session ID），服务器可以在后续请求中识别和追踪特定用户的会话状态。
用户偏好设置：网站可以使用Cookie来保存用户。

js中如何使用Cookies

在JavaScript中，可以使用document.cookie对象来操作和管理Cookie。

设置Cookie：

要设置一个Cookie，可以通过给document.cookie赋值一个字符串来实现。该字符串的格式为key=value;，可以添加多个键值对，用分号进行分隔。例如：

document.cookie = "username=John Doe;";
document.cookie = "[email protected];";

注意：在设置Cookie时，键名和键值都需要进行URL编码。可以使用encodeURIComponent()函数来编码特殊字符。

获取Cookie：

可以通过读取document.cookie属性来获取浏览器中保存的所有Cookie。返回的值是一个以分号分隔的字符串，包含所有Cookie的键值对。例如：

var allCookies = document.cookie;
console.log(allCookies);

还可以编写自定义函数来获取指定的Cookie值。例如：

function getCookie(name) {
    
    
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    
    
    var cookie = cookies[i].split("=");
    if (cookie[0] === name) {
    
    
      return decodeURIComponent(cookie[1]);
    }
  }
  return "";
}

var username = getCookie("username");
console.log(username);

删除Cookie：

要删除Cookie，可以通过设置过期时间将其设置为过去的时间点。例如：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
//注意：删除Cookie时，必须提供与设置Cookie时相同的路径和域。

除了设置、获取和删除Cookie，还可以通过指定Cookie的过期时间、路径、域等属性来进行更精确的控制。例如：

document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 UTC; path=/; domain=example.com; secure";

在上述例子中，设置了一个名为username的Cookie，它将在2023年底之前一直存在，路径为根目录，域为example.com，只能通过安全连接（HTTPS）传输。

需要注意的是，访问和操作Cookie受到同源策略的限制。只能在当前域下读取和设置Cookie，无法跨域访问其他域的Cookie信息。

localStorage

localStorage是HTML5提供的一种客户端存储机制，用于在浏览器中长期保存数据。它允许开发者在用户的本地浏览器中存储键值对数据，并且该数据在页面刷新、关闭后依然存在。

localStorage与传统的Cookie相比具有以下特点：

容量更大：localStorage的容量通常比Cookie更大，可以存储更多的数据。
不会被发送到服务器：存储在localStorage中的数据不会在每个请求中自动发送到服务器，减少了网络传输的负担。
在同源策略下操作：localStorage遵循同源策略，只能在相同的域名、协议和端口下进行读取和写入操作。
只存储字符串类型数据：localStorage只能存储字符串类型的数据。如果需要存储其他数据类型，可以使用JSON.stringify()将其转换为字符串进行存储，再使用JSON.parse()进行读取和解析。

js中如何使用localStorage

使用localStorage非常简单：

存储数据：

localStorage.setItem('key', 'value');

获取数据：

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

删除数据：

localStorage.removeItem('key');

清空所有数据：

localStorage.clear();

需要注意的是，localStorage中存储的数据是持久化的，即使用户关闭浏览器或重新启动计算机，存储的数据仍然存在。因此，适合用于长期保存用户偏好设置、本地缓存等数据。然而，由于是在本地存储，所以需要注意保护用户隐私和数据安全，避免存储敏感信息或将localStorage用于恶意目的。

sessionStorage

sessionStorage是HTML5提供的一种客户端存储机制，用于在浏览器中临时保存数据。与localStorage相似，sessionStorage也允许开发者在用户的本地浏览器中存储键值对数据，但与localStorage不同的是，sessionStorage中的数据仅在当前会话（session）期间有效。

会话期间指的是用户在浏览器中打开一个页面到关闭该页面之间的时间段。当用户关闭浏览器标签页或整个浏览器时，sessionStorage中的数据将被清除。

js中如何使用sessionStorage

sessionStorage与localStorage的使用方法类似：