前端本地存儲

一、前端本地存儲封裝

在前端開發中，我們常常需要存儲一些數據，如用戶信息、頁面的狀態等。這些數據通常需要在多個頁面之間共享，而不是僅在當前頁面可用。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);
};