web组蓝桥杯备考（HTML)

小鱼冻干
67 阅读6分钟

HTML篇

本地存储

本地存储分为cookie、localStorage、sessionStorage

cookie

1. 介绍：

cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。

2. 作用：

是网站存储在用户浏览器中的小型数据片段

  • 例如：当我们打开一个网站时，如果这个网站我们曾经登录过，那么当我们再次打开网站时，发现就不需要再次登录了，而是直接进入了首页。
3. 表示：

cookie是以键值对进行表示的(key-value)，例如name=jack，这个就表示cookie的名字是name，cookie携带的值是jack。

4.组成
  • Name：这个是cookie的名字
  • Value：这个是cooke的值
  • Path：这个定义了Web站点上可以访问该Cookie的目录
  • Expires：这个值表示cookie的过期时间，也就是有效值，cookie在这个值之前都有效。
  • Size：这个表示cookie的大小
5. 生命周期
  • 会话性：如果cookie为会话性，那么cookie仅会保存在客户端的内存中，当我们关闭客服端时cookie也就失效了
  • 持久性：如果cookie为持久性，那么cookie会保存在用户的硬盘中，直至生存期结束或者用户主动将其销毁。
原理

第一次访问网站，浏览器会发送一个请求，服务器响应这个请求，会将cookie放进响应请求中。

第二次访问网站，浏览器发送的请求带有cookie，服务器会辨别这个用户的身份，相应的服务器也可以修改cookie。

用一个流程图表示（如下，推荐画图工具processon！）

在这里插入图片描述

cookie的常见方法

1. 设置 Cookie： 使用 document.cookie 设置Cookie：

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

  • 参数说明：

    • username=JohnDoe：键值对。
    • expires：设置过期时间（UTC格式）。
    • path=/：指定Cookie的作用路径（默认为当前路径）。

2. 读取 Cookie：读取所有Cookie：

let cookies = document.cookie; // 返回所有Cookie的字符串
console.log(cookies); // 输出：username=JohnDoe; theme=dark
  • 返回的是一个字符串，需要解析。

解析特定Cookie的值：

function getCookie(name) {
    let cookieArr = document.cookie.split(";");
    for (let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");
        if (name === cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

let username = getCookie("username");
console.log(username); // 输出：JohnDoe

3. 修改 Cookie

修改Cookie与设置Cookie方法相同，只需重新设置同名Cookie即可：

document.cookie = "username=JaneDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

4. 删除 Cookie

通过设置过期时间为过去的时间来删除Cookie：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

5. 设置 Cookie 的可选属性

可以为Cookie设置更多属性，如 Secure、HttpOnly、SameSite 等：

document.cookie = "username=JohnDoe; Secure; SameSite=Strict; path=/";
  • Secure：仅通过HTTPS传输。
  • HttpOnly：禁止JavaScript访问（只能通过服务器设置）。
  • SameSite：限制跨站请求时发送Cookie。
缺点

（1）cookie可能被禁用。当用户非常注重个人隐私的时候，浏览器cookie可以被禁用。

（2）cookie与浏览器相关。cookie是不能跨域请求的，访问同一个页面，不同浏览器之间保存的cookie也是不能相互访问的。

（3）cookie可能被删除。每个cookie都是硬盘中的文件，因此可能被用户删除。

（4）cookie安全性不高。所有的cookie都是以纯文本形式记录在文件中，如果要保存加密信息，最好事先经过加密处理。

API方法

sessionStrorage

数据仅在浏览器的会话期间有效。一旦关闭页面或标签页，数据就会被清除，适用于存储临时性的数据，如表单状态、页面之间的传递数据等。

用法：

  1. 存储数据：
// 存储一个 session 数据 
sessionStorage.setItem('sessionData', 'This is session data');

2.读取数据：

//读取session数据
const sessionData=sessionStorage.getItem('sessionData');
console.log(sessionData);//输出:This is session data

3.删除数据：

//删除session数据
sessionStorage.removeItem('sessionData');

4.清空所有session数据

sessionStorage.clear();
localStorage

数据的持久化程度高，即使用户关闭浏览器后，数据依然会被保留。除非显式删除，数据可以一直存在，适用于持久保存用户偏好设置、用户认证信息等需要长时间保存的数据。 用法：

  1. 存储数据

使用localStorage.setItem(key, value) 方法将数据存储到 localStorage 中：

//存储一个用户名
localStorage.setItem('username','Alice')
  1. 读取数据 使用 localStorage.getItem(key) 方法可以获取存储在 localStorage 中的数据：
//读取存储的用户名
const username=localStorage.getItem('username');
console.log(username);//输出Alice
  1. 删除数据

可以通过 localStorage.removeItem(key) 方法来删除指定的存储数据：

//删除存储的用户名
localStorage.removeItem('username');
  1. 清空所有数据

如果需要清除 localStorage 中的所有数据，可以使用localStorage.clean()方法

localStorage.clean();
  1. 更新数据

localStorage 中的值是可以覆盖更新的，只需要再次调用 setItem 方法即可：

//更新用户名为Bob
localStorage.setItem('userItem','Bob')
  1. 存储对象和数组

localStorage 只能存储字符串，如果需要存储对象或数组，可以将它们序列化为 JSON 格式：

//存储一个对象
const user={name:'Alice',age:25};
localStorage.setItem('user',JSON.stringify(user));
//读取对象
const storeUser=JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);//输出Alice
应用场景

localStorage 的应用场景：

  • 用户偏好设置：如主题颜色、语言设置等。
  • 用户身份信息：保存用户登录状态以便后续访问无需重新登录。
  • 长期数据保存：保存一些用户操作数据或浏览历史，以便下次访问时继续使用。

sessionStorage 的应用场景：

  • 临时数据存储：表单数据的暂存、用户填写进度的保存等。
  • 页面跳转数据传递：在多页应用中，页面之间传递数据但不希望数据持久化。
  • 一次性设置：例如购买流程中保存用户选择的产品信息，用户关闭页面后清空。

注意： 不要在 localStorage 或 sessionStorage 中存储敏感的用户数据（如密码、支付信息等），因为这些数据可以被恶意脚本轻易获取。

cookie和localStorage的区别

  1. 存储大小

localStorage：约 5MB（不同浏览器有差异）。 Cookies：约 4KB。

  1. 数据传输

localStorage：不会随每次 HTTP 请求发送，因此不会影响页面的加载性能。 Cookies：会随每次 HTTP 请求发送，可能增加带宽占用，影响页面加载速度。

  1. 生命周期

localStorage：持久存储，数据不会随浏览器关闭而清除，除非用户手动删除。 Cookies：可以设置到期时间，适合存储一些需要定期自动清除的数据。

avatar
文章
阅读
粉丝