JavaScript知识系列（6）每天10个小知识点

最新推荐文章于 2024-08-03 17:05:14 发布

云边散步

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量116

点赞数

分类专栏： JavaScript面试题系列文章标签： javascript java 网络前端

本文链接：https://blog.csdn.net/weixin_52003205/article/details/132890846

版权

JavaScript面试题系列专栏收录该内容

12 篇文章 1 订阅

订阅专栏

系列文章目录

JavaScript知识系列（1）每天10个小知识点

JavaScript知识系列（2）每天10个小知识点

JavaScript知识系列（3）每天10个小知识点

JavaScript知识系列（4）每天10个小知识点

JavaScript知识系列（5）每天10个小知识点

知识点

50.defineProperty 和 proxy的概念、作用、原理、特性、优点、缺点、区别、使用场景

Object.defineProperty 和 Proxy 是 JavaScript 中用于对象属性访问和修改的两种重要机制，它们有不同的概念、作用、原理、特性、优点、缺点、区别和使用场景。

Object.defineProperty

概念：

Object.defineProperty 是一个用于在对象上定义属性的方法，可以用于添加新属性或修改现有属性的特性。

作用：

用于对对象属性进行精细的控制，包括设置属性的值、获取属性的值、设置属性的可枚举性、可配置性和可写性等特性。

原理：

Object.defineProperty 使用一个属性描述符对象来定义属性，该对象包括value、writable、enumerable、configurable等属性，用于控制属性的行为。

特性：

支持老版本的 JavaScript。
主要用于对象属性的数据访问控制。

优点：

精细控制属性行为。
兼容性好。

缺点：

需要逐个属性进行设置，不够灵活。
不适用于代理对象。

区别：

Object.defineProperty 主要用于修改或定义对象属性的特性，但不适用于代理对象。
不支持监听整个对象的变化。

使用场景：

对象属性的精细控制，如定义计算属性、隐藏属性等。

Proxy

概念：

Proxy 是 ECMAScript 6 引入的对象代理机制，允许你创建一个代理对象，用于控制对目标对象的访问。

作用：

用于创建代理对象，允许拦截对目标对象的操作，包括读取、写入、删除、遍历等。

原理：

Proxy 创建一个代理对象，该代理对象通过拦截器函数（handler）来捕获对目标对象的操作，可以在拦截器函数中自定义行为。

特性：

支持最新版本的 ECMAScript，更强大且灵活。
可以监听整个对象的变化。
可以拦截多种操作。

优点：

灵活且强大的拦截能力，适用于代理对象。
可以监听整个对象的变化。

缺点：

兼容性较差，需要新版本的 JavaScript。
学习成本相对较高。

区别：

Proxy 更加强大和灵活，支持代理对象和监听整个对象。
Object.defineProperty 主要用于对象属性的精细控制。

使用场景：

代理对象，如拦截对象属性的访问和修改。
数据劫持，用于实现响应式框架（如Vue）。
监听对象变化，如实现数据变化的通知机制。

总结来说，Object.defineProperty 主要用于对象属性的特性控制，而 Proxy 更加灵活，适用于代理对象、监听对象变化、自定义拦截等场景。在新项目中，推荐使用 Proxy，但在需要兼容老版本 JavaScript 的项目中，可能需要使用 Object.defineProperty。

51.跨域不同解决方式的概念、作用、原理、特性、优点、缺点、区别、使用场景

跨域（Cross-Origin）是指在浏览器中，一个网页的脚本试图访问另一个源（域名、协议、端口组合）的资源时发生的安全限制。跨域问题通常涉及到同源策略（Same-Origin Policy），它是浏览器的一种安全机制，阻止网页从一个源加载的文档或脚本获取来自另一个源的数据。以下是不同的跨域解决方式的详细解释：

1. JSONP（JSON with Padding）

概念：JSONP是一种跨域通信的技术，通过动态创建<script>标签来加载包含JSON数据的脚本文件，实现跨域数据的获取。
作用：允许从其他源获取数据，绕过同源策略的限制。
原理：浏览器允许<script>标签加载来自不同源的脚本文件，JSONP将JSON数据包装在一个回调函数中，通过加载包含该回调函数的脚本文件来获取数据。
特性：只支持GET请求，依赖回调函数，不安全。
优点：简单易用，广泛支持。
缺点：只能发送GET请求，不支持POST等其他HTTP方法；安全性较差，容易受到跨站脚本攻击（XSS）。
区别：与常规AJAX请求不同，JSONP使用<script>标签动态加载数据。
使用场景：用于获取公开数据、跨域统计分析、第三方登录等。

2. CORS（Cross-Origin Resource Sharing）

概念：CORS是一种基于HTTP头部的跨域解决方案，通过服务器端设置响应头来控制是否允许跨域请求。
作用：允许服务器明确指定哪些源可以访问其资源，提高安全性。
原理：服务器设置响应头中的Access-Control-Allow-Origin等字段来声明允许的源，浏览器根据这些字段决定是否允许跨域请求。
特性：支持各种HTTP请求方法，安全可控。
优点：安全性高，支持各种HTTP方法，对前端无特殊要求。
缺点：需要服务器端的支持，不适用于所有场景。
区别：与JSONP不同，CORS是通过HTTP头部来控制跨域访问。
使用场景：用于Web应用与API服务器之间的跨域通信。

3. 代理服务器

概念：代理服务器是一个中间层服务器，允许客户端发送请求到代理服务器，代理服务器再将请求发送到目标服务器，然后将响应返回给客户端。客户端与代理服务器之间不受同源策略限制。
作用：允许客户端绕过同源策略，通过代理服务器间接访问目标服务器。
原理：客户端请求代理服务器，代理服务器将请求转发给目标服务器，然后将响应返回给客户端。
特性：可控制性高，支持各种HTTP方法，需搭建额外的代理服务器。
优点：可实现高度定制化的跨域解决方案。
缺点：需要额外的服务器资源，配置复杂，安全性需谨慎考虑。
区别：与直接请求目标服务器不同，通过代理服务器中转请求。
使用场景：用于处理复杂的跨域情况，如代理跨域请求到内网服务器。

4. WebSocket

概念：WebSocket是一种双向通信协议，允许客户端与服务器之间建立持久性的全双工通信连接。
作用：允许客户端与不同源的WebSocket服务器建立连接，实现实时通信。
原理：WebSocket通过特殊的握手过程建立连接，之后客户端和服务器之间可以直接发送数据。
特性：全双工通信，实时性高。
优点：实时性强，适用于在线聊天、游戏、通知等场景。
缺点：需要服务器端支持WebSocket协议。
区别：与HTTP不同，WebSocket是一种持久性的通信协议。
使用场景：用于实时通信、在线游戏、实时数据更新等。

每种跨域解决方式都有其特定的用途和优缺点，选择合适的解决方案取决于具体的需求和环境。通常，CORS是最常见和推荐的跨域解决方案，但在一些特殊情况下，其他方式也可以发挥作用。

52.JS判断变量是不是数组，请列出多种方法

在 JavaScript 中，你可以使用多种方法来判断一个变量是否为数组。以下是一些常见的方法：

1. 使用Array.isArray()方法：

if (Array.isArray(myVariable)) {
  // 变量是一个数组
} else {
  // 变量不是一个数组
}

2. 使用instanceof运算符：

if (myVariable instanceof Array) {
  // 变量是一个数组
} else {
  // 变量不是一个数组
}

3. 使用Object.prototype.toString.call()方法：

if (Object.prototype.toString.call(myVariable) === '[object Array]') {
  // 变量是一个数组
} else {
  // 变量不是一个数组
}

4. 使用Array.isArray()的兼容性写法：

if (typeof Array.isArray === 'function' && Array.isArray(myVariable)) {
  // 变量是一个数组
} else {
  // 变量不是一个数组
}

5. 使用myVariable.constructor === Array：

if (myVariable.constructor === Array) {
  // 变量是一个数组
} else {
  // 变量不是一个数组
}

这些方法都可以用来判断一个变量是否为数组，具体选择哪种方法取决于你的代码和项目的需求。Array.isArray() 是最推荐的方法，因为它是最简洁、最可读的方式，而且兼容性良好。

53.JS数组去重的方法，请列出多种方法

在 JavaScript 中，有多种方法可以对数组进行去重。以下是一些常见的去重方法：

1. 使用 Set 数据结构：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];

2. 使用 forEach 和 includes 方法：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
array.forEach(item => {
  if (!uniqueArray.includes(item)) {
    uniqueArray.push(item);
  }
});

3. 使用 filter 方法：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, self) => self.indexOf(item) === index);

4. 使用 reduce 方法：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

5. 使用 ES6 Map 数据结构：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(new Map(array.map(item => [item, item])).values());

6. 使用 ES6 filter 和 indexOf 方法：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, self) => self.indexOf(item) === index);

7. 使用递归去重：

function unique(array) {
  return array.reduce((accumulator, currentValue) => {
    if (!accumulator.includes(currentValue)) {
      accumulator.push(currentValue);
    }
    return accumulator;
  }, []);
}

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = unique(array);

这些方法都可以用来对数组进行去重，具体选择哪种方法取决于你的代码和项目的需求。通常情况下，使用 Set 数据结构是最简洁和高效的方式，但其他方法也可以满足不同的需求。

54.JS找出多维数组最大值，请列出多种方法

在 JavaScript 中，有多种方法可以找出多维数组中的最大值。以下是一些常见的方法：

1. 使用循环遍历：

function findMaxMultiDimensionalArray(array) {
  let max = -Infinity;
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array[i].length; j++) {
      if (array[i][j] > max) {
        max = array[i][j];
      }
    }
  }
  return max;
}

const multiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const max = findMaxMultiDimensionalArray(multiArray);

2. 使用 Math.max() 和 apply()：

function findMaxMultiDimensionalArray(array) {
  return Math.max.apply(null, array.map(subArray => Math.max.apply(null, subArray)));
}

const multiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const max = findMaxMultiDimensionalArray(multiArray);

3. 使用 reduce()：

function findMaxMultiDimensionalArray(array) {
  return array.reduce((max, subArray) => Math.max(max, Math.max(...subArray)), -Infinity);
}

const multiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const max = findMaxMultiDimensionalArray(multiArray);

4. 使用递归：

function findMaxMultiDimensionalArray(array) {
  if (Array.isArray(array[0])) {
    return findMaxMultiDimensionalArray(array.flat());
  } else {
    return Math.max(...array);
  }
}

const multiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const max = findMaxMultiDimensionalArray(multiArray);

这些方法都可以用来找出多维数组中的最大值，具体选择哪种方法取决于你的代码和项目的需求。最常用的方法是使用循环遍历或使用 reduce() 方法，但其他方法也可以根据情况选择。

55.JS找出字符串出现最多次数的字符以及次数，请列出多种方法

在 JavaScript 中，有多种方法可以找出字符串中出现最多次数的字符以及其出现的次数。以下是一些常见的方法：

1. 使用对象统计字符出现次数：

function findMostFrequentChar(str) {
  const charCount = {};
  let maxChar = '';
  let maxCount = 0;

  for (const char of str) {
    charCount[char] = (charCount[char] || 0) + 1;
    if (charCount[char] > maxCount) {
      maxChar = char;
      maxCount = charCount[char];
    }
  }

  return { char: maxChar, count: maxCount };
}

const inputString = "Hello, World!";
const result = findMostFrequentChar(inputString);
console.log(`最多出现的字符是 "${result.char}"，出现次数为 ${result.count} 次`);

2. 使用 Map 统计字符出现次数：

function findMostFrequentChar(str) {
  const charCount = new Map();
  let maxChar = '';
  let maxCount = 0;

  for (const char of str) {
    charCount.set(char, (charCount.get(char) || 0) + 1);
    if (charCount.get(char) > maxCount) {
      maxChar = char;
      maxCount = charCount.get(char);
    }
  }

  return { char: maxChar, count: maxCount };
}

const inputString = "Hello, World!";
const result = findMostFrequentChar(inputString);
console.log(`最多出现的字符是 "${result.char}"，出现次数为 ${result.count} 次`);

3. 使用数组和排序：

function findMostFrequentChar(str) {
  const charArray = str.split('');
  charArray.sort();

  let maxChar = '';
  let maxCount = 0;
  let currentChar = '';
  let currentCount = 0;

  for (const char of charArray) {
    if (char !== currentChar) {
      if (currentCount > maxCount) {
        maxChar = currentChar;
        maxCount = currentCount;
      }
      currentChar = char;
      currentCount = 1;
    } else {
      currentCount++;
    }
  }

  return { char: maxChar, count: maxCount };
}

const inputString = "Hello, World!";
const result = findMostFrequentChar(inputString);
console.log(`最多出现的字符是 "${result.char}"，出现次数为 ${result.count} 次`);

这些方法都可以用来找出字符串中出现最多次数的字符以及其出现的次数，具体选择哪种方法取决于你的代码和项目的需求。第一种方法使用对象或 Map 统计字符出现次数是最常用的方式，因为它们的时间复杂度是线性的，而使用排序的方法可能需要更多的时间。

56.JS实现字符串的增、删、查、改、过滤的功能，请列出多种方法

以下是 JavaScript 中实现字符串的增、删、查、改、过滤功能的多种方法：

1. 字符串增加（追加）字符：

// 使用字符串拼接
const str1 = "Hello";
const newStr1 = str1 + " World";

// 使用字符串连接方法 concat()
const str2 = "Hello";
const newStr2 = str2.concat(" World");

// 使用模板字符串
const str3 = "Hello";
const newStr3 = `${str3} World`;

2. 字符串删除字符：

// 使用字符串的 slice() 方法
const str = "Hello, World!";
const newStr = str.slice(0, 5) + str.slice(7);

// 使用字符串的 replace() 方法
const str = "Hello, World!";
const newStr = str.replace(", ", "");

// 使用正则表达式替换
const str = "Hello, World!";
const newStr = str.replace(/, /g, "");

// 使用字符串的 substring() 方法
const str = "Hello, World!";
const newStr = str.substring(0, 5) + str.substring(7);

3. 字符串查找字符：

// 使用字符串的 indexOf() 方法
const str = "Hello, World!";
const index = str.indexOf("W");

// 使用字符串的 includes() 方法
const str = "Hello, World!";
const isFound = str.includes("W");

// 使用正则表达式匹配
const str = "Hello, World!";
const pattern = /W/;
const isFound = pattern.test(str);

4. 字符串修改字符：

// 使用字符串的 replace() 方法
const str = "Hello, World!";
const newStr = str.replace("World", "Universe");

// 使用正则表达式替换
const str = "Hello, World!";
const newStr = str.replace(/World/g, "Universe");

// 使用字符串的 substring() 方法
const str = "Hello, World!";
const newStr = str.substring(0, 7) + "Universe" + str.substring(14);

5. 字符串过滤字符：

// 使用字符串的 split() 方法和 join() 方法
const str = "Hello, World!";
const newStr = str.split(" ").filter(word => word !== "World").join(" ");

// 使用正则表达式替换
const str = "Hello, World!";
const newStr = str.replace(/World/g, "");

// 使用字符串的 substring() 方法
const str = "Hello, World!";
const newStr = str.substring(0, 7) + str.substring(14);

这些是一些常见的方法，用于实现字符串的增、删、查、改、过滤功能。具体选择哪种方法取决于你的需求和代码的复杂性。需要注意的是，JavaScript 中的字符串是不可变的，因此这些方法都会返回新的字符串，而不会修改原始字符串。

以下是 JavaScript 中实现字符串过滤和去重功能的多种方法：

字符串的过滤：

使用正则表达式过滤非指定字符：

const str = 'Hello,123World!';
const pattern = /[^A-Za-z\\s]/g;
const filteredStr = str.replace(pattern, ''); // 过滤非字母和空格字符

使用循环和条件判断过滤字符：

const str = 'Hello,123World!';
let filteredStr = '';
for (const char of str) {
  if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z') || char === ' ') {
    filteredStr += char;
  }
}

使用 filter() 方法和正则表达式：

const str = 'Hello,123World!';
const pattern = /[^A-Za-z\\s]/g;
const charArray = str.split('');
const filteredArray = charArray.filter(char => !char.match(pattern));
const filteredStr = filteredArray.join('');

字符串的去重：

使用 Set 数据结构（ES6）：

const str = 'Hello, World!';
const uniqueChars = [...new Set(str)].join(''); // 去重字符串中的字符

使用对象属性去重：

const str = 'Hello, World!';
const uniqueStr = '';
const charCount = {};
for (const char of str) {
  if (!charCount[char]) {
    uniqueStr += char;
    charCount[char] = true;
  }
}

使用 filter() 方法和 indexOf() 去重：

const str = 'Hello, World!';
const charArray = str.split('');
const uniqueArray = charArray.filter((char, index, self) => self.indexOf(char) === index);
const uniqueStr = uniqueArray.join('');

这些方法都可以用来实现字符串的过滤和去重功能，具体选择哪种方法取决于你的代码和项目的需求。根据需求选择合适的方法，以满足你的字符串处理需求。

57.JS中new操作符具体做了什么

在 JavaScript 中，new 操作符用于创建一个新对象，并将构造函数（constructor）与该对象关联，然后返回这个新对象。它具体做了以下几件事情：

创建一个新的空对象：new 操作符首先创建一个新的空对象，这个对象将成为构造函数的实例。
关联构造函数：将这个新对象的原型属性（__proto__）关联到构造函数的原型对象（prototype）。这样，新对象就可以访问构造函数原型上的属性和方法。
执行构造函数：将构造函数作为一个普通函数调用，同时将新对象作为函数内部的 this 对象。这允许构造函数初始化新对象的属性。
返回新对象：如果构造函数没有明确返回一个对象，则 new 操作符会返回新创建的对象。如果构造函数显式返回一个对象，那么返回的就是这个对象，而不是新创建的对象。

下面是一个示例，说明 new 操作符的工作原理：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Alice", 30);

console.log(person1.name); // 输出 "Alice"
console.log(person1.age);  // 输出 30

在这个示例中，new Person("Alice", 30) 创建了一个 Person 构造函数的实例，并将构造函数中的属性赋值给了 person1 对象。person1 现在就是一个 Person 对象的实例。

58.var、let、const的概念、作用、原理、特性、优点、缺点、区别、使用场景

在 JavaScript 中，var、let 和 const 都用于声明变量，但它们之间有一些重要的区别：

作用域（Scope）：
- var：具有函数作用域（function scope），在函数内部声明的变量在整个函数范围内可见。
- let 和 const：具有块级作用域（block scope），在块（如 { ... }）内部声明的变量只在该块范围内可见。
变量提升（Hoisting）：
- var：变量声明会提升到其所在函数或全局作用域的顶部，但初始化（赋值）不会提升。这意味着你可以在声明之前访问 var 变量，但它的值会是 undefined。
- let 和 const：变量声明不会被提升，如果在声明之前访问 let 或 const 变量，会引发暂时性死区（Temporal Dead Zone，简称 TDZ）错误。
重复声明：
- var：允许在同一作用域内重复声明同一个变量，后面的声明会覆盖前面的。
- let 和 const：不允许在同一作用域内重复声明同一个变量，否则会引发语法错误。
初始化：
- var：声明时如果不初始化，变量会被赋予 undefined 值。
- let 和 const：声明时如果不初始化，变量不会被赋予初始值，而是保持未定义状态。
全局对象属性：
- var：使用 var 声明的全局变量会成为全局对象（如 window）的属性。
- let 和 const：在全局作用域中使用 let 和 const 声明的变量不会成为全局对象的属性。
可变性：
- var：var 声明的变量可以随时被重新赋值。
- let：let 声明的变量可以被重新赋值，但不允许重新声明。
- const：const 声明的变量是常量，一旦赋值就不能再次赋值，也不允许重新声明。
适用场景：
- var：在 ES6 之前主要用于声明全局变量或具有特定需求的变量。
- let：推荐用于大多数变量声明，尤其是在块级作用域内。
- const：用于声明常量，不会被重新赋值的变量，也可用于块级作用域内的变量。

总之，let 和 const 是 ES6 引入的新变量声明方式，它们更安全、可预测，具有块级作用域，推荐在现代 JavaScript 中使用它们，尤其是在替代 var 的情况下。选择 let 还是 const 取决于变量是否需要重新赋值。

var、let 和 const 是 JavaScript 中用于声明变量的关键字，它们具有不同的特性和适用场景。

概念和作用：

var：var 是早期 JavaScript 中声明变量的方式，具有函数作用域（function scope）。它的作用是声明一个变量，并可赋予变量初始值。var 声明的变量在整个函数内部可见。
let：let 是 ES6（ECMAScript 2015）引入的声明变量的方式，具有块级作用域（block scope）。它的作用是声明一个变量，并可赋予变量初始值。let 声明的变量只在当前块（包括函数块、循环块等）内可见。
const：const 也是 ES6 引入的声明变量的方式，同样具有块级作用域。它的作用是声明一个常量，并必须在声明时赋予初始值，之后不可再次赋值。const 声明的常量只在当前块内可见。

原理和特性：

var：具有变量提升（hoisting）特性，变量声明会被提升到当前作用域的顶部，但初始化（赋值）不会提升。var 声明的变量可以重复声明，而且在全局作用域下会成为全局对象的属性。
let 和 const：不具备变量提升特性，存在暂时性死区（Temporal Dead Zone，简称 TDZ），必须在声明后才能访问。不允许重复声明相同的变量。不会成为全局对象的属性。

优点和缺点：

var：
- 优点：兼容性好，在 ES5 及以下环境中使用。
- 缺点：存在变量提升和全局污染问题，作用域容易混淆。
let：
- 优点：避免了变量提升，更安全，更符合预期的块级作用域。
- 缺点：在一些旧的浏览器中可能不支持。
const：
- 优点：常量声明，值不可变，增强代码的可读性和可维护性。
- 缺点：必须在声明时赋予初始值，不可重新赋值，不能用于循环中的计数器等。

区别和使用场景：

var 适用于早期 JavaScript 环境，但不建议在现代代码中使用，因为它容易引发问题。
let 是通用的变量声明方式，适用于大多数情况，特别是在需要块级作用域的场景。
const 适用于常量的声明，值不可变的情况，提高代码的可读性和安全性。常用于声明不需要重新赋值的变量。

总之，推荐在现代 JavaScript 项目中使用 let 和 const，避免使用 var，以提高代码的可维护性和可读性。选择 let 还是 const 取决于变量是否需要重新赋值。

59.localStorage、sessionStorage、cookie的概念、作用、原理、特性、优点、缺点、区别、使用场景

localStorage、sessionStorage 和 cookie 都是用于在浏览器端存储数据的机制，但它们有不同的特性和适用场景。

localStorage:

概念： localStorage 是 Web Storage API 提供的一种本地存储机制，允许将数据以键值对的形式存储在客户端浏览器中，并且数据在不同会话之间保持永久性。
作用： 用于在浏览器端永久性存储数据，直到用户手动删除或清除浏览器缓存。
原理： 使用本地数据库存储数据，数据以字符串形式存储，可以通过 JavaScript API 进行读写。
特性：
- 存储容量较大（通常为5-10MB）。
- 数据在不同浏览器会话中保持一致。
- 存储的数据类型受限于字符串。
- 通过 JavaScript API 访问，易于使用。
优点： 永久性存储，容量较大，易于使用。
缺点： 存储的数据类型受限，不能跨域名共享。

sessionStorage:

概念： sessionStorage 也是 Web Storage API 提供的本地存储机制，用于在客户端浏览器中以键值对的形式存储数据，但数据仅在当前会话（页面关闭后销毁）中有效。
作用： 用于在浏览器端临时性存储数据，仅在当前会话中有效。
原理： 与 localStorage 类似，使用本地数据库存储数据。
特性：
- 存储容量较大（通常为5-10MB）。
- 数据在当前会话中有效，关闭页面后数据被销毁。
- 存储的数据类型受限于字符串。
- 通过 JavaScript API 访问，易于使用。
优点： 临时性存储，容量较大，易于使用。
缺点： 存储的数据类型受限，不能跨域名共享。

cookie:

概念： cookie 是浏览器提供的一种存储机制，用于在客户端和服务器之间存储小量数据，以便实现用户状态的跟踪和会话管理。
作用： 用于存储小量数据，通常用于用户认证、跟踪和存储临时数据。
原理： cookie 数据以键值对的形式存储在浏览器中，并在每次 HTTP 请求中通过请求头传递给服务器。
特性：
- 存储容量较小（通常为4KB）。
- 可以设置过期时间，可以在不同页面和会话之间共享。
- 存储的数据类型为字符串。
- 通过 JavaScript API 访问，但相对较复杂。
优点： 可以跨域名共享，可设置过期时间，用于用户认证和会话管理。
缺点： 存储容量较小，数据在每次 HTTP 请求中传递，不适合存储大量数据。