【前端方案】-表格排序列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的数据），超过有限内存空间的数据将会被删除。
大致思路：

简单实现思路

1. class LRUCache {
2.     data = new Map(); // 数据map
3.     constructor(length) {
4.     if (length < 1) throw new Error('长度不能小于1')
5.         this.length = length
6.     }
8.     set(key, value) {
9.         const data = this.data;
10.         // 如果存在该对象,则直接删除
11.         if (data.has(key)) {
12.             data.delete(key);
13.         }
14.         // 将数据对象添加到map中
15.         data.set(key, value);
16.         if (data.size > this.length) {
17.             // 如果map长度超过最大值,则取出map中的第一个元素,然后删除
18.             const delKey = data.keys().next().value
19.             data.delete(delKey);
20.         }
21.     }
22.     get(key) {
23.         const data = this.data;
24.         // 数据map中没有key对应的数据,则返回null
25.         if (!data.has(key)) return null;
26.         const value = data.get(key);
27.         // 返回数据前,先删除原数据,然后在添加,就可以保持在最新
28.         data.delete(key);
29.         data.set(key, value);
30.         return value;
31.     }
32. }
34. const lruCache = new LRUCache(2);
35. lruCache.set('1', 1); // Map(1) {1 => 1}
36. lruCache.set('2',2); // Map(2) {1 => 1, 2 => 2}
37. console.log(lruCache.get('1')); // Map(2) {2 => 2, 1 => 1}
38. lruCache.set('3',3); // Map(2) {1 => 1, 3 => 3}
39. console.log(lruCache.get('2')); // null
40. lruCache.set('4',4); // Map(2) {3 => 3, 4 => 4}
41. console.log(lruCache.get('1')); // null
42. console.log(lruCache.get('3')); // Map(2) {4 => 4, 3 => 3}
43. console.log(lruCache.get('4')); // Map(2) {3 => 3, 4 => 4}

复制代码

map结合localstorage实现存储操作用例

1. let contacts = new Map()
2. contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
3. contacts.set('Hilary22',333) // undefined
4. contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
5. //contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
7. console.log(contacts)
8. console.log(JSON.stringify(Array.from(contacts.entries())))
10. window.localStorage.setItem('test',JSON.stringify(Array.from(contacts.entries())))
12. //console.log(new Map(JSON.parse(window.localStorage.getItem('test'))))
13. contacts = new Map(JSON.parse(window.localStorage.getItem('test')))
14. onsole.log( contacts  )

复制代码

封装storage

1. export default {
2.   setItem(key, item) {
3.     let stringifyItem;
4.     try {
5.       stringifyItem = JSON.stringify(item);
6.     } catch (error) {
7.       stringifyItem = '';
8.     } finally {
9.       window.localStorage.setItem(key, stringifyItem);
10.     }
11.   },
12.   getItem(key) {
13.     let item;
14.     try {
15.       const stringifyItem = window.localStorage.getItem(key);
16.       item = JSON.parse(stringifyItem);
17.     } catch (erorr) {
18.       item = null;
19.     }
20.     return item;
21.   },
22.   removeItem(key) {
23.     window.localStorage.removeItem(key);
24.   },
25. };

复制代码

后续升级
达到一定量级，如果要做针对用户层面的表格列操作缓存，会考虑结合后端存储使用indexDb存储方式，支持G级别大小。

来源:https://www.cnblogs.com/mrwh/p/17462996.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！