JS本地存储详解

一、localStorage与sessionStorage的区别

localStorage与sessionStorage都属于Web Storage的API。两者的区别在于：

1、存储数据的生命周期：localStorage可以永久存储数据，除非手动删除或清空浏览器缓存。而sessionStorage只能在会话期间（同一窗口或标签页）有效，在关闭窗口或标签页后自动丢失。

2、存储数据的作用域：localStorage在同一域名下的所有页面均可访问，而sessionStorage仅限于同一会话期间的页面可访问。

因此，localStorage适合用于持久化存储一些用户配置信息、用户偏好等数据。而sessionStorage则适合用于临时存储会话期间需要用到的数据。

//localStorage示例代码
localStorage.setItem('username', 'Alice');
localStorage.getItem('username'); //返回'Alice'
localStorage.removeItem('username');

//sessionStorage示例代码
sessionStorage.setItem('orderId', '123456');
sessionStorage.getItem('orderId'); //返回'123456'
sessionStorage.clear();

二、indexedDB的使用

indexedDB是一个基于事件的本地数据库API，可以在客户端（浏览器、PWA）中存储和检索大量数据。相比localStorage和sessionStorage而言，indexedDB可以支持更大容量的数据，并且更适合存储结构化数据。

使用indexedDB可以分为以下几个步骤：

1、创建或打开数据库：打开一个数据库需要指定数据库名、版本号和数据库描述。

2、创建对象存储空间：对象存储空间类似于一张表，存储一组有共同字段的对象。

3、添加数据：使用add或put方法将数据添加到指定的对象存储空间。

4、查询数据：使用get、getAll或索引查询等方法进行数据检索。

5、更新数据：使用put方法更新指定的数据。

6、删除数据：使用delete或clear方法删除指定或全部数据。

//创建或打开数据库
const request = indexedDB.open('myDatabase', 1); //第二个参数为数据库的版本号

//创建对象存储空间
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore('books', { keyPath: 'isbn' });
};

//添加数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readwrite');
  const store = transaction.objectStore('books');
  
  const book = {
    title: 'JavaScript高级程序设计',
    author: 'Nicholas C.Zakas',
    isbn: '978-7-121-20717-6'
  };
  
  const addRequest = store.add(book);
  
  addRequest.onsuccess = function() {
    console.log('保存成功');
  };
};

//查询数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readonly');
  const store = transaction.objectStore('books');
  
  const getRequest = store.get('978-7-121-20717-6');
  
  getRequest.onsuccess = function(event) {
    const book = event.target.result;
    console.log(book.title, book.author);
  };
};

//更新数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readwrite');
  const store = transaction.objectStore('books');
  
  const updateRequest = store.put({
    title: '新的JavaScript高级程序设计',
    author: 'Nicholas C.Zakas',
    isbn: '978-7-121-20717-6'
  });
  
  updateRequest.onsuccess = function() {
    console.log('更新成功');
  };
};

//删除数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readwrite');
  const store = transaction.objectStore('books');
  
  const deleteRequest = store.delete('978-7-121-20717-6');
  
  deleteRequest.onsuccess = function() {
    console.log('删除成功');
  };
};

三、cookie的使用

以前在Web开发中，cookie是常用的本地存储方式。在HTTP请求中，cookie会随着请求头一起发送到服务器端，服务器通过设置响应头Set-Cookie来设置Cookie。

因此，cookie适合用于存储小容量、敏感性不高的数据，如用户登录状态、用户行为记录等。但是，cookie的缺点也比较明显，如容量小（4KB）、必须在服务器端解析等。

使用cookie可以分为以下几个步骤：

1、设置cookie：在响应头中设置Set-Cookie。

2、读取cookie：从请求头中读取Cookie。

3、更新cookie：同设置cookie。

//设置cookie
document.cookie = 'name=Alice';

//读取cookie
const name = document.cookie.split('; ')[0].split('=')[1];

//更新cookie
document.cookie = 'name=Bob';

四、Web Storage的兼容性

虽然localStorage和sessionStorage已经成为常用的本地存储方式，但是还是存在一些浏览器不支持的情况。在低版本的IE浏览器中，Web Storage API可能不被支持或存在兼容性问题。因此，需要在使用之前检查浏览器是否支持Web Storage API。

if(typeof(Storage) !== 'undefined') {
  //支持Web Storage API
} else {
  //不支持Web Storage API
}

五、本地存储的安全性

使用本地存储时，需要注意数据的安全性。因为本地存储的数据存储在用户的本地硬盘中，存在被窃取的可能性。

为了增加数据的安全性，在使用Web Storage时，可以做以下的处理：

1、不存储敏感数据：如密码、银行账户等敏感信息不要存储在本地。

2、加密处理：可以对存储的数据进行加密处理。

3、短期过期：设置短期过期时间，如30分钟或1小时。

4、跨域访问：尽量不要在跨域的情况下使用Web Storage API，避免数据被其他域名下的页面访问到。

六、总结

本文从localStorage与sessionStorage的区别、indexedDB的使用、cookie的使用、Web Storage的兼容性和安全性等方面详细介绍了JavaScript本地存储的相关知识。希望本文可以对读者了解和使用JavaScript本地存储提供帮助。