JavaScript Storage管理技巧：如何利用浏览器本地存储？

JavaScript中，我们可以使用浏览器的本地存储来保存数据。这对于提升用户体验和服务端性能有非常大的作用。本文将探讨JavaScript中的本地存储技巧。

一、localStorage和sessionStorage

在浏览器端，localStorage 和 sessionStorage 是两个非常常用的本地存储方式。它们都可以独立存储至少5MB的数据，并支持增删改查操作。

//localStorage的使用方法
localStorage.setItem('name', 'John');
console.log(localStorage.getItem('name')); //John
localStorage.removeItem('name');

//sessionStorage的使用方法
sessionStorage.setItem('name', 'John');
console.log(sessionStorage.getItem('name')); //John
sessionStorage.removeItem('name');

这里需要注意的是，localStorage与sessionStorage之间的区别在于后者的存储内容仅限于用户会话（session）期间，当用户关闭浏览器窗口后，存储的数据将被清除。

二、cookie

除了localStorage和sessionStorage，JavaScript还有一种常用的本地存储方式是cookie。cookie是一小段文本信息，存储在浏览器端，以便下次访问时读取信息。cookie具有以下特点：

• 每个cookie的最大大小约为4kb。
• 每个域名下最多可以存储20个cookie。
• cookie可以设置过期时间。
• cookie可以被JS直接读取。

//设置cookie
document.cookie = "username=John; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/"

//读取cookie
function getCookie(cname) {
  const name = cname + "=";
  const ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while(c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if(c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

//删除cookie
function deleteCookie(cname) {
  document.cookie = `${cname}=''; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`
}

三、IndexDB

如果需要存储更多数据，我们可以使用IndexDB。IndexDB是一种以对象存储为基础的高级本地存储技术，可以存储大量结构化数据，支持离线访问。

//打开数据库
const request = window.indexedDB.open('myDB', 1)
let db
request.onerror = function(event) {
  console.error('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
  db = event.target.result;
};

//创建对象仓库
const objectStore = db.createObjectStore('users', { keyPath: 'id' });

//添加数据
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
const user1 = { id: 1, name: 'John', age: 28 };
store.add(user1);

//查询数据
const tx = db.transaction(['users'], 'readonly');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = function() {
  console.log(request.result);
};

//更新数据
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = function() {
  const data = request.result;
  data.age++;
  store.put(data);
};

//删除数据
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
store.delete(1);

四、总结

本文介绍了JavaScript在本地存储方面的几种方式：localStorage和sessionStorage，cookie和IndexDB。每种本地存储技术都有其适用的场景，需要视具体情况而定。