前端本地存储

一、前端本地存储封装

在前端开发中，我们常常需要存储一些数据，如用户信息、页面的状态等。这些数据通常需要在多个页面之间共享，而不是仅在当前页面可用。Web 技术的发展，使得在客户端本地存储数据成为了可能。前端本地存储可以帮助我们轻松地实现数据的读取和存储，并且不需要每次请求和传输数据。为了方便地使用前端本地存储，我们可以将其封装成我们自己的 API，以简化其使用。

// 本地存储封装类
class Storage {
  constructor() {
    this.storage = window.localStorage;
  }
  get(key) {
    return this.storage.getItem(key);
  }
  set(key, value) {
    this.storage.setItem(key, value);
  }
  remove(key) {
    this.storage.removeItem(key);
  }
  clear() {
    this.storage.clear();
  }
}

二、前端本地存储统计页面访问量

在一些应用场景中，我们需要统计网站或应用的页面访问量。通常情况下，我们可以将页面的访问次数存储到本地存储中，并在页面加载的时候读取该数据，并将访问次数加一。在此示例中，我们使用了上一节中所封装的 Storage 类。

// 记录页面访问次数
const pageViewCount = new Storage();
let count = pageViewCount.get('count') || 0;
count++;
pageViewCount.set('count', count);

// 在页面中展示访问次数
const viewCountElement = document.getElementById('view-count');
viewCountElement.textContent = count;

三、前端本地存储代码

前端本地存储主要使用 window.localStorage 对象进行操作。下面是一些常见的本地存储操作代码示例。

// 将对象转化成 JSON 字符串并存储
const user = { name: 'Alice', age: 28 };
window.localStorage.setItem('user', JSON.stringify(user));

// 从本地存储中读取 JSON 字符串并解析成对象
const userJSON = window.localStorage.getItem('user');
const userObject = JSON.parse(userJSON);

// 存储数组数据
const fruits = ['apple', 'banana', 'cherry'];
window.localStorage.setItem('fruits', JSON.stringify(fruits));

// 读取数组数据
const fruitsJSON = window.localStorage.getItem('fruits');
const fruitsArray = JSON.parse(fruitsJSON);

// 移除某个数据
window.localStorage.removeItem('user');

// 移除所有数据
window.localStorage.clear();

四、前端本地存储有几种方式

前端本地存储有以下几种方式：

• Cookie：可以通过设置过期时间、路径等属性来存储一些简单的数据，但是容量有限。
• Web Storage：包括 localStorage 和 sessionStorage 两种类型，可以存储更多的数据，但是数据类型有限制。
• IndexedDB：将大量结构化数据存储到客户端，支持事务和索引，但是 API 相对复杂。
• Web SQL Database：已经被废弃。

五、前端本地存储数组

前端本地存储可以存储各种类型的数据，包括数组。我们可以将数组转换成 JSON 字符串，存储到本地存储中。示例代码如下：

// 存储数组数据
const fruits = ['apple', 'banana', 'cherry'];
window.localStorage.setItem('fruits', JSON.stringify(fruits));

// 读取数组数据
const fruitsJSON = window.localStorage.getItem('fruits');
const fruitsArray = JSON.parse(fruitsJSON);

// 修改数组数据
fruitsArray.push('durian');
window.localStorage.setItem('fruits', JSON.stringify(fruitsArray));

// 删除数组数据
fruitsArray.splice(1, 1);
window.localStorage.setItem('fruits', JSON.stringify(fruitsArray));

六、前端本地存储加密

在某些应用场景中，我们需要对本地存储的敏感数据进行加密，以增强数据的安全性。通常情况下，我们可以使用加密算法对敏感数据进行加密，并将密文存储到本地存储中。在本地存储读取数据时，需要使用相同的加密算法对密文进行解密。下面是一个简单的加密示例：

// 加密数据
const secretData = 'hello world';
const key = 'my-secret-key';
const encryptedData = CryptoJS.AES.encrypt(secretData, key).toString();
console.log(encryptedData);

// 解密数据
const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);
console.log(decryptedData);

七、前端本地存储多少

前端本地存储的容量大小不同于 Cookie，而是由浏览器和操作系统共同决定的。通常情况下，现代浏览器对本地存储的容量限制在 5MB 左右。如果需要存储更多的数据，我们可以考虑使用 IndexedDB。

八、前端本地存储超过5M

如果需要存储大量的数据，而本地存储的容量又受限制，我们可以考虑使用 IndexedDB。IndexedDB 是浏览器提供的一种数据库存储方案，支持存储大量的结构化数据，通过事务和索引来管理数据。IndexedDB 的 API 相对比较复杂，下面是一个简单的示例：

// 打开数据库
const request = window.indexedDB.open('my-db', 1);
let db;
request.onsuccess = function(event) {
  db = event.target.result;
};

// 创建对象存储
const objectStore = db.createObjectStore('people');
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });

// 存储数据
const transaction = db.transaction(['people'], 'readwrite');
const peopleStore = transaction.objectStore('people');
peopleStore.add({ name: 'Alice', email: 'alice@example.com' });
peopleStore.add({ name: 'Bob', email: 'bob@example.com' });
transaction.oncomplete = function() {
  console.log('Data stored successfully.');
};

// 读取数据
const transaction = db.transaction(['people'], 'readonly');
const peopleStore = transaction.objectStore('people');
const emailIndex = peopleStore.index('email');
const request = emailIndex.get('bob@example.com');
request.onsuccess = function(event) {
  console.log(event.target.result);
};