JS使用LocalStorage存取

在前端开发中，常常需要将一些数据存储在本地，以便下次访问时能快速获取。LocalStorage是一种用于浏览器中存储数据的API，与Cookie不同，LocalStorage不会随着每次网页请求自动发送给服务器，也没有过期时间限制。

检测LocalStorage是否可用

在使用LocalStorage存储数据之前，需要先检测浏览器是否支持该API。以下代码会进行检测：

if (typeof(Storage) !== "undefined") {
  //存储代码
} else {
  alert("抱歉！您的浏览器不支持web存储。");
}

存储数据

在LocalStorage中存储数据可以使用setItem()方法。

localStorage.setItem("key", "value");

其中key表示存储的数据标识符，value则表示实际存储的数据。这里需要注意的是，LocalStorage只能存储字符串类型数据，如果需要存储其他类型数据，需要将其转换为字符串类型。存储数组和对象时，可以使用JSON.stringify()方法进行转换。

var myObj = {name: "John", age: 30};
localStorage.setItem("myObj", JSON.stringify(myObj));

获取数据

从LocalStorage中获取数据可以使用getItem()方法。

var value = localStorage.getItem("key");

如果获取的数据是数组或对象，需要将其进行转换。

var myObj = JSON.parse(localStorage.getItem("myObj"));

删除数据

使用removeItem()方法可以删除LocalStorage中的指定数据。

localStorage.removeItem("key");

删除LocalStorage中全部数据可以使用clear()方法。

localStorage.clear();

存储数据时限制大小

LocalStorage在不同浏览器中存储数据大小的限制不同，通常情况下其存储大小为5MB。如果需要存储更多数据，则需要考虑设置数据大小限制，可以使用以下方式：

const maxSize = 1024 * 1024 * 5; //设置最大存储数据大小为5MB
const storage = window.localStorage;

function setData(key, value) {
   const data = {
      value,
      timestamp: Date.now()
   };
   storage.setItem(key, JSON.stringify(data));
}

function getData(key) {
   const rawData = storage.getItem(key);
   if(rawData) {
      const data = JSON.parse(rawData);
      if(Date.now() - data.timestamp > 3600 * 1000) { //检查数据是否过期
         storage.removeItem(key);
         return null;
      } else {
         return data.value;
      }
   }
}

以上代码将存储的数据包装成一个对象，并添加了时间戳属性。在获取数据时，还会检查数据是否过期，如果过期则需要将其删除。