关于Web Storage，你应该知道的内容

鱼露
1,576 阅读3分钟

当我们需要在浏览器中存储数据的时候，通常会想到使用Web Storage API，今天来介绍一下关于Web Storage，你应该知道的内容。

Web Storage提供了让开发者在Web浏览器中存储数据的能力，你可以添加、修改或删除存储的数据，它的键和值都是字符串

Web Storage的类型

Web Storage分为两种类型：localStorage和sessionStorage。

  • localStorage将数据存储在浏览器中，即使关闭浏览器，数据也会保留。
  • sessionStorage将数据存储在会话期间，在关闭浏览器后数据会丢失。

Web Storage的基本API就不过多介绍了，简单的列一下，不清楚的话可以点击链接到MDN查看

API

  • Storage.length 只读

    返回一个整数，表示存储在 Storage 对象中的数据项数量。

  • Storage.key()

    该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。

  • Storage.getItem()

    该方法接受一个键名作为参数，返回键名对应的值。

  • Storage.setItem()

    该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

  • Storage.removeItem()

    该方法接受一个键名作为参数，并把该键名从存储中删除。

  • Storage.clear()

    调用该方法会清空存储中的所有键名。

StorageEvent

StorageEvent可以用于在同一域名，不同页面下订阅localStorage变化

要点：

  1. 在同一个页面修改localStorage并不会触发这个事件
  2. 设置相同的值也不会触发，比如重复执行 
    localStorage.setItem('data','a')
localStorage.setItem('data','a')

举个例子：

  • 在浏览器打开掘金A页面 juejin.cn/

  • 然后再新建一个Tab打开掘金B页面 juejin.cn/user/127508…

  • 在B页面的控制台中运行这段代码,表示订阅storage事件

      ```
  window.addEventListener('storage', function(e) {
      console.log(e)
  });
  ```

  • 然后在A页面中运行这段代码

    localStorage.setItem('data','a')

  • 就可以在B页面中看到触发了对应的事件

event.png

Window.sessionStorage

  • 页面刷新数据也不会丢失
  • 在当前会话，打开新的页面，比如用window.open(url)打开同一个域的页面，会复制当前会话的数据 
    sessionStorage.setItem('data','a')
window.open('https://juejin.cn/')
    • 这时会打开新的页面，可以在控制台中输入sessionStorage.getItem('data')，可以看到这个会话复制了一份之前的sessionStorage
  • 不同会话中，他们的sessionStorage都是独立的，哪怕像上一个步骤一样复制sessionStorage

容量

不同浏览器对sessionStorage和localStorage设置的容量大小都有所不同，一般5-10M

这里我们可以写一段代码来测试一下容量

/**
 * 默认构建1k大小的字符串
 * @param len 
 * @returns 
 */
const strBuilder = (len = 1024) => {
  return new Array(len + 1).join("a")
}

function test(type = 'localStorage') {
  let start = 0;
  let end = 1024 * 20; // 20MB
  const str1k = strBuilder()

  window[type].clear();

  while (start <= end) {
    try {
      window[type].setItem(start, str1k);
      start += 1
    } catch (e) {
      console.log(e)
      break
    }
  }

  console.log(type + '最大容量: ', start, 'k');
}
test('localStorage')
test('sessionStorage')

如果对于Web Storage还有其他补充的内容，可以在评论区中讨论

“ 本文正在参加「金石计划」 ”

avatar
文章
阅读
粉丝