【前端方案】-表格排序列LRU快取方案

目標：
排序后的表格列，頁面重繪或者用戶重新登錄后，能夠保持之前的操作排序

完成效果：

解決方案：
利用localstorage對排序后的表格列屬性進行存盤，頁面重繪或者用戶重新進入該頁面時都先從localstorage中讀取
1.存盤方式：localstorage（key，value）
key - 表格增加配置屬性tableHeaderKey，以當前路由的path+tableHeaderKey來做key
value - 排序后的屬性列陣列（defaultKeys-所有屬性列key，selectedKeys要顯示的key，tableSize表格高度）只存key，減少存盤空間
2.存盤時機：
配置有tableHeaderKey并且showTableSetting開啟，進入頁面就讀取，沒有則先存一份
3.移除或新增列的情況：
（1）在后續需求迭代中，以前表格的欄位列可能會增加或者減少，需要將新的欄位列和localstorage中的舊有欄位列進行diff，如果存在洗掉的欄位，則移除，存在新增欄位則自動追加，
（2）或者強制更新，通過讀取發版的版本號，如果發版的版本號大于舊的版本號，則清空localstorage，
升級方案：
針對localstorage快取太多的情況，會采用LRU演算法對快取進行優化，
LRU全稱為Least Recently Used，即最近使用的，針對的是在有限的記憶體空間內，只快取最近使用的資料（即get和set的資料），超過有限記憶體空間的資料將會被洗掉，
大致思路：

簡單實作思路

class LRUCache {
    data = https://www.cnblogs.com/mrwh/archive/2023/06/07/new Map(); // 資料map
    constructor(length) {
    if (length < 1) throw new Error('長度不能小于1')
        this.length = length
    }

    set(key, value) {
        const data = https://www.cnblogs.com/mrwh/archive/2023/06/07/this.data;
        // 如果存在該物件,則直接洗掉
        if (data.has(key)) {
            data.delete(key);
        }
        // 將資料物件添加到map中
        data.set(key, value);
        if (data.size > this.length) {
            // 如果map長度超過最大值,則取出map中的第一個元素,然后洗掉
            const delKey = data.keys().next().value
            data.delete(delKey);
        }
    }
    get(key) {
        const data = this.data;
        // 資料map中沒有key對應的資料,則回傳null
        if (!data.has(key)) return null;
        const value = data.get(key);
        // 回傳資料前,先洗掉原資料,然后在添加,就可以保持在最新
        data.delete(key);
        data.set(key, value);
        return value;
    }
}

const lruCache = new LRUCache(2);
lruCache.set('1', 1); // Map(1) {1 => 1}
lruCache.set('2',2); // Map(2) {1 => 1, 2 => 2}
console.log(lruCache.get('1')); // Map(2) {2 => 2, 1 => 1}
lruCache.set('3',3); // Map(2) {1 => 1, 3 => 3}
console.log(lruCache.get('2')); // null
lruCache.set('4',4); // Map(2) {3 => 3, 4 => 4}
console.log(lruCache.get('1')); // null
console.log(lruCache.get('3')); // Map(2) {4 => 4, 3 => 3}
console.log(lruCache.get('4')); // Map(2) {3 => 3, 4 => 4}

map結合localstorage實作存盤操作用例

let contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
contacts.set('Hilary22',333) // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
//contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}

console.log(contacts)
console.log(JSON.stringify(Array.from(contacts.entries())))

window.localStorage.setItem('test',JSON.stringify(Array.from(contacts.entries())))

//console.log(new Map(JSON.parse(window.localStorage.getItem('test'))))
contacts = new Map(JSON.parse(window.localStorage.getItem('test')))
onsole.log( contacts  )

封裝storage

export default {
  setItem(key, item) {
    let stringifyItem;
    try {
      stringifyItem = JSON.stringify(item);
    } catch (error) {
      stringifyItem = '';
    } finally {
      window.localStorage.setItem(key, stringifyItem);
    }
  },
  getItem(key) {
    let item;
    try {
      const stringifyItem = window.localStorage.getItem(key);
      item = JSON.parse(stringifyItem);
    } catch (erorr) {
      item = null;
    }
    return item;
  },
  removeItem(key) {
    window.localStorage.removeItem(key);
  },
};

后續升級
達到一定量級，如果要做針對用戶層面的表格列操作快取，會考慮結合后端存盤使用indexDb存盤方式，支持G級別大小，

標籤：其他

上一篇：js 函式宣告和函式運算式的執行結果

下一篇：返回列表