12. WEB储存

在Web存储中，常见的技术包括：

Cookies（Cookie）：是一种存储在客户端的小型文本文件，可被Web服务器用于存储和检索数据。Cookies通过HTTP头部进行传输，并具有一定的限制。

Web Storage：通过localStorage和sessionStorage对象提供了更简单的本地存储方式。它们可以存储较大量级的数据，且不随每次请求自动发送到服务器。

IndexedDB：是一种高级的客户端数据库，允许在浏览器中存储结构化数据。它提供了一种类似于关系数据库的方式来存储和获取数据。

localStorage和sessionStorage

1. localStorage是window（全局对象）的一个子对象，它提供了持久化存储数据的机制。存储在localStorage中的数据会一直保存，除非被用户手动删除或通过代码删除。

2. localStorage的操作可以通过对象语法或专属方法来完成：

   • 对象语法：

     // 设置localStorage的值
     localStorage.name = "admin";
     
     // 修改localStorage的值
     localStorage.name = "root";
     
     // 删除localStorage的值
     delete localStorage.name;
     

   • 专属方法：

     // 设置localStorage的值
     localStorage.setItem("name", "admin");
     
     // 修改localStorage的值
     localStorage.setItem("name", "root");
     
     // 获取localStorage的值
     localStorage.getItem("name");
     
     // 删除localStorage的值
     localStorage.removeItem("name");
     
     // 清空localStorage中的所有数据（慎用）
     localStorage.clear();
     

   以上操作都是针对localStorage中特定键（例如"name"）的值进行的。使用setItem方法设置值，getItem方法获取值，removeItem方法删除特定键值对，clear方法清空所有键值对。

   对于专属方法，存储的值会被自动转换为字符串类型，所以可以存储任何类型的数据（如字符串、数字、布尔值等）。

   注意：使用localStorage时，请确保存储的数据不包含敏感信息，并且在使用clear方法清空时要慎用，以免误删其他重要数据。

cookie的语法:

当在JavaScript中操作Cookie时，可以使用以下语法：

1. 设置Cookie的值：

document.cookie = "name=value";

使用等号（=）将Cookie的名称和值分隔开。

可以添加其他属性，使用分号（;）分隔，例如：

document.cookie = "name=value; expires=Thu, 01 Jan 2023 00:00:00 GMT; path=/";

2. 获取Cookie的值：

var cookieValue = document.cookie;

document.cookie将返回一个字符串，包含所有Cookie的名称和值。

注意：获取的值可能还包括其他Cookie的内容，需要进行解析。

3. 删除Cookie：

为了删除一个Cookie，设置其过期时间为过去的时间，让浏览器自动删除该Cookie。

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

需要注意的是，JavaScript中设置Cookie的操作受到同源策略的限制。只能设置和获取与当前网页位于同一域名、同一协议和同一端口的Cookie。

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输和存储。它基于JavaScript的对象字面量语法，但与JavaScript对象不同，它是一种纯文本形式的数据表示。

JSON的特点包括：

1. 简洁性：JSON使用简洁的键值对表示数据，并支持嵌套和数组结构，使数据易于理解和解析。
2. 可读性：JSON数据使用普通文本表示，易于人类阅读和编写，也方便调试。
3. 兼容性：JSON是一种通用的数据格式，几乎所有编程语言都能支持解析和生成JSON数据。
4. 互联网标准：JSON采用了一种通用的数据格式，适用于在Web上进行数据交换，也是许多Web API的数据交互格式。

在JavaScript中，可以使用内建的JSON对象来处理JSON数据：

• JSON.parse()：将JSON字符串解析为JavaScript对象或其他数据类型。

• JSON.stringify()：将JavaScript对象转换为JSON字符串。

示例：

// 将JavaScript对象转换为JSON字符串
const data = {
  name: "John",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "swimming"]
};

const jsonString = JSON.stringify(data);
console.log(jsonString);
// 输出: {"name":"John","age":30,"isStudent":false,"hobbies":["reading","swimming"]}

// 将JSON字符串解析为JavaScript对象
const parsedData = JSON.parse(jsonString);
console.log(parsedData);
// 输出: { name: 'John', age: 30, isStudent: false, hobbies: [ 'reading', 'swimming' ] }

JSON在Web开发中经常用于与服务器进行数据交互，如在AJAX请求中发送和接收JSON数据，或将数据存储在服务器端的数据库中。同时，JSON也可以在前端进行本地数据存储，如将数据保存在localStorage中。