我的前端知识学习笔记

Appearance

Return to top
On this page

HTML5 Web 存储

无需发送给服务器，只在客户端存储的数据都可以使用 HTML5 Web 存储，主要有

  1. localStorage 没有过期时间，用户可以手动清除，在无痕浏览时存储的数据也会随着浏览器窗口的关闭而过期。
  2. sessionStorage 会在对应的标签页关闭时，清除存储的数据。

值得一提的是，通过浏览器“历史记录”或者“最近关闭”恢复标签页时，对应的 sessionStorage 中存储的数据也会恢复。

Storage 对象

localStorage 和 sessionStorage 都使用了 Storage 对象存储数据。

根据其 Storage 对象 API 手写的一段实现代码（非浏览器实际的实现代码）。

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 

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);
  });
});