JavaScript中的本地存储和会话存储是什么？

在JavaScript中，本地存储和会话存储是两种可用的存储技术。这两种技术都允许程序员在客户端存储数据，而不需要将其发送到服务器。

本地存储

本地存储允许程序员在客户端持久地存储数据。本地存储可以存储大量数据，因此非常适合存储持久的用户数据（例如，个人资料、首选项等）。

localStorage

localStorage是HTML5中的一个新功能，允许程序员在客户端使用key-value数据存储数据。localStorage实现了HTML5规范中定义的Web存储API。localStorage允许程序员存储属性（即键值对），并在以后检索它们。特别是，属性在浏览器被关闭，然后重新打开后仍然存在。以下是使用localStorage的代码示例：

// 存储数据
localStorage.setItem('myVar', 'Hello World');

// 读取数据
var myVar = localStorage.getItem('myVar');

// 删除数据
localStorage.removeItem('myVar');

IndexedDB

IndexedDB是一个高级的本地存储解决方案，允许程序员在客户端存储大量结构化数据。IndexedDB是一个NoSQL数据库，允许程序员使用对象存储数据。IndexedDB在与其他API（例如Web Workers）结合使用时特别有用。以下是使用IndexedDB的代码示例：

// 打开数据库
var request = indexedDB.open('myDatabase', 1);

// 在数据库中创建一个存储对象
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore('customers', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

// 将数据添加到存储对象中
request.onsuccess = function(event) {
  var db = event.target.result;
  var transaction = db.transaction(['customers'], 'readwrite');
  var objectStore = transaction.objectStore('customers');
  
  var customer = {
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com'
  };
  
  objectStore.add(customer);
};

会话存储

与本地存储不同，会话存储仅允许程序员在客户端存储临时数据。会话存储通常显著限制存储容量，通常的限制是5-10 MB，但具体取决于浏览器。

sessionStorage

sessionStorage与localStorage非常相似，但是访问其数据的生命期仅限于窗口或浏览器选项卡的生命期。如果用户关闭浏览器选项卡，则会话存储数据将被销毁。以下是使用sessionStorage的代码示例：

// 存储数据
sessionStorage.setItem('myVar', 'Hello World');

// 读取数据
var myVar = sessionStorage.getItem('myVar');

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

总结

本地存储和会话存储都是很有用的浏览器存储技术。本地存储是保持数据持久性的首选技术。当需要在会话期间存储数据时，会话存储（即sessionStorage）是一种非常方便的解决方案。不管哪种技术，都应该谨慎使用，避免存储敏感信息。