Appearance
HTML5 Web 存储
无需发送给服务器,只在客户端存储的数据都可以使用 HTML5 Web 存储,主要有
localStorage
没有过期时间,用户可以手动清除,在无痕浏览时存储的数据也会随着浏览器窗口的关闭而过期。sessionStorage
会在对应的标签页关闭时,清除存储的数据。
值得一提的是,通过浏览器“历史记录”或者“最近关闭”恢复标签页时,对应的 sessionStorage
中存储的数据也会恢复。
Storage
对象
localStorage
和 sessionStorage
都使用了 Storage
对象存储数据。
根据其 Storage
对象 API 手写的一段实现代码(非浏览器实际的实现代码)。
typescript
function MyStorage() {
let keys: string[] = [];
let store: Record<string, string> = {};
return {
length: keys.length,
key(index: number) {
if (index >= 0) {
return keys[index];
}
},
getItem(key: string) {
return store[key];
},
setItem(key: string, value: string) {
keys = [...keys.filter((k) => k !== key), key];
store[key] = value;
},
clear() {
keys = [];
store = {};
},
removeItem(key: string) {
keys = keys.filter((k) => k !== key);
delete store[key];
},
};
}
Test Cases
javascript
const { MyStorage } = require('../docs/base/javascript/storage');
describe('MyStorage', () => {
it('myLocalStorage', () => {
const s = MyStorage();
s.setItem('a', '1');
expect(s.getItem('a')).toBe('1');
expect(s.length === 1);
s.setItem('b', '2');
expect(s.getItem('b')).toBe('2');
expect(s.length === 2);
s.setItem('c', '3');
expect(s.getItem('c')).toBe('3');
expect(s.length === 3);
expect(s.getItem('d')).toBe(undefined);
expect(s.key(0)).toBe('a');
expect(s.key(1)).toBe('b');
expect(s.key(2)).toBe('c');
s.removeItem('a');
expect(s.getItem('a')).toBe(undefined);
expect(s.length === 2);
s.clear();
expect(s.length === 0);
});
});