我正在寻找一种在浏览器中执行Memcached提供的功能的方法,即能够配置大小限制(例如localStorage配额),并且它将自动逐出旧项目以将缓存保持在限制之下。
好处是,只要对缓存密钥进行版本控制/时间戳化,就不需要显式删除。我见过一些类似的库,但有“项目数”限制,但是大小限制对于保持浏览器的配额是更有用的。
答案 0 :(得分:3)
这不能完美实现,因为不能保证浏览器如何存储本地存储的内容,但是可以创建足够接近的实现。
我们可以从一个事实开始,即JS中的字符串是16-bit unsigned integer value(因为所有内容都作为字符串存储在localStorage
中)。这意味着我们可以使用content.length * 16 / 8
轻松获取任何字符串的大小(以字节为单位)。
所以现在我们只需要创建一个缓存,该缓存可以跟踪存储的内容的大小和密钥的大小,它将内容存储在下面。
一个非常原始和天真的实现方式可能是:
class Cache {
private keyStoreKey: string;
private cacheSizeKey: string;
/**
* List of the keys stored in this cache.
*/
private storedKeys: string[] = [];
/**
* The size of the stored values in bytes
*/
private cacheSize: number = 0;
constructor(
private prefix: string,
private sizeLimit: number,
) {
if(this.sizeLimit < 100) {
// the minimal size of the cache is 24 + prefix, otherwise, it would enter
// a loop trying to remove every element on any insert operation.
throw new Error('Cache size must be above 100 bytes');
}
this.keyStoreKey = `${prefix}:k`;
this.cacheSizeKey = `${prefix}:s`;
this.cacheSize = localStorage.getItem(this.cacheSizeKey) ? Number.parseInt(localStorage.getItem(this.cacheSizeKey)) : 0;
this.storedKeys = localStorage.getItem(this.keyStoreKey) ? localStorage.getItem(this.keyStoreKey).split(',') : [];
}
/**
* The size of the keys in bytes
*/
public get keyStoreSize() {
return this.calculateLenght(this.storedKeys.join(`${this.prefix}:v:,`));
}
public get totalUsedSize() {
return this.cacheSize + this.keyStoreSize + this.calculateLenght(this.keyStoreKey) + this.calculateLenght(this.cacheSizeKey);
}
/**
* Returns the size of the given string in bytes.
*
* The ECMAScript specification defines character as single 16-bit unit of UTF-16 text
*/
private calculateLenght(content: string): number {
return content.length * 16 / 8;
}
/**
* Saves an item into the cahce.
*
* NOTE: name cannot contain commas.
*/
public set(name: string, content: string) {
const newContentSize = this.calculateLenght(content);
if(!(this.storedKeys).some(storedName => storedName === name)) {
this.storedKeys.unshift(name);
this.cacheSize += newContentSize;
} else {
this.storedKeys = this.storedKeys.filter(n => n !== name);
this.storedKeys.unshift(name);
const oldContentSize = this.calculateLenght(localStorage.getItem(`${this.prefix}:v:${name}`));
this.cacheSize = this.cacheSize - oldContentSize + newContentSize;
}
while(this.totalUsedSize > this.sizeLimit && this.storedKeys.length > 0) {
this.removeOldestItem();
}
localStorage.setItem(this.cacheSizeKey, this.cacheSize.toString());
localStorage.setItem(`${this.prefix}:debug:totalSize`, this.totalUsedSize.toString());
localStorage.setItem(this.keyStoreKey, this.storedKeys.join(','));
localStorage.setItem(`${this.prefix}:v:${name}`, content);
}
/**
* The oldest item is the last in the stored keys array
*/
private removeOldestItem() {
const name = this.storedKeys.pop();
const oldContentSize = this.calculateLenght(localStorage.getItem(`${this.prefix}:v:${name}`));
this.cacheSize -= oldContentSize;
localStorage.removeItem(`${this.prefix}:v:${name}`);
}
}
window['cache'] = new Cache('test', 200);
我尚未实现用于读取数据的功能,但是由于密钥存储在数组中,因此您可以轻松实现getMostRecent()或getNthRecent(position)或仅实现一个简单的get(key)函数。
如果您不熟悉Typescript,则可以忽略该未知部分。
答案 1 :(得分:1)
如果您想使用此功能已经存在的解决方案,则可以签出该库runtime-memcache的实现lru
和其他一些缓存方案(mru
,{{1 }})。
它使用修改后的双链表为timeout
,get
和set
实现O(1)。