本地存储

本地存储是指将数据存储在用户本地设备上的一种技术。常见的本地存储技术包括：Cookie、Web Storage、IndexedDB、FileSystem API等。

Cookie

Cookie 是一种最早的本地存储技术，用于在浏览器和服务器之间传递信息。Cookie 的最大特点是可以设置过期时间，也可以通过设置路径、域名等属性来限制它的使用范围。

Cookie 的使用方式如下：

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

Web Storage

Web Storage 是一种 HTML5 中新引入的本地存储技术，包括 localStorage 和 sessionStorage 两种类型。

localStorage 和 sessionStorage 都可以在浏览器关闭后仍然保留数据，并且可以跨页面共享数据。其中，localStorage 存储的数据没有过期时间，而 sessionStorage 存储的数据仅在当前会话中有效。

Web Storage 的使用方式如下：

// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');

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

IndexedDB

IndexedDB 是一种浏览器本地存储技术，可以存储大量结构化数据。与 Web Storage 不同的是，IndexedDB 数据库可以进行索引和查询，并支持事务操作。

IndexedDB 的使用方式如下：

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

request.onerror = function(event) {
  console.log('数据库打开失败');
};

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log('数据库打开成功');

  // 增删改查等操作
};

// 创建表格
request.onupgradeneeded = function(event) { 
  const db = event.target.result;
  const objectStore = db.createObjectStore('user', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

FileSystem API

FileSystem API 是一种用于访问用户文件系统的本地存储技术。它允许 web 应用程序读写文件，并在没有网络连接的情况下保留数据。

FileSystem API 的使用方式如下：

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

// 请求文件系统
navigator.webkitPersistentStorage.requestQuota(1024*1024*1024, function(grantedBytes) {
  window.requestFileSystem(window.PERSISTENT, grantedBytes, function(fs) {
    console.log('文件系统请求成功');
    
    // 增删改查等操作
  }, function() {
    console.log('文件系统请求失败');
  });
});

总的来说，本地存储技术具有简单、高效、安全等优点，在开发中是非常有用的。程序员应该根据具体的需求选择合适的本地存储技术。