五分钟面试题——LocalStorage 和 SessionStorge 异同

poloma
7,108 阅读4分钟

前言

兄弟们周五好，经历了最近的大厂裁员潮以后，身边一同学习的小伙子们都停下了继续卷的动力，大家今天一道面试题继续冲！！！

对于现在技术社区的现状的，我分析用户画像 觉得大部分的用户更多的是喜欢短频快的节奏文章，所以故尝试用最短时间挖掘简单的面试题，将背后的知识整理分享给大家，喜欢在后续的面试过程中，希望对你有帮助，如果刚好是自己的知识盲区不妨帮忙点赞支持一下

背景

最近在面试候选人的过程中，往往遇到很难从简历中获取到他擅长或者熟悉部分，进行深度沟通交流，所以不得不问一些 八股文 基础，看看候选人对一个简单点，理解的深度。这次我们从前端常用 Web storage API 本地存储出发切入，来问关于这两个常用的功能之间的差异

Storage API 用法

这里需要注意到一点，两者其实都拥有一个相同的原型对象 Storage。我相信如果你在面试过程中能回答这一点应该是相当加分!

image.png

Web Storage 包含如下两种机制：

  • sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。

属性

  • Storage.length 只读

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

方法

  • Storage.key()

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

  • Storage.getItem()

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

  • Storage.setItem()

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

  • Storage.removeItem()

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

  • Storage.clear()

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

localStorage & sessionStorage 最明显区别

存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

上面提到的这点，应该大部分同学都知道的区别，两者应用业务场景不同。

当点击某个链接打开新的Tab页面的同时，sessionStorage 将不会继承到新的页面上，即使新的 Tab 页面是符合同源策略，sessionStorage 是和当前Tab页相关

兼容性差异

image.png

image.png

验证当前浏览器是否可用

从上面 caniuse 的截图不难看出，存在不同的浏览器兼容差异，为了能够使用 localStorage，我们应该首先验证它是否在当前浏览会话中受支持并可用。

支持 localStorage 的浏览器将在窗口对象上具有一个名为 localStorage 的属性。但是，仅断言该属性存在可能会引发异常。如果 localStorage 确实存在，则仍然不能保证 localStorage 实际可用，因为各种浏览器都提供了禁用 localStorage 的设置。因此，浏览器可能支持localStorage，但不适用于页面上的脚本。

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

在这里进行调用

if (storageAvailable('localStorage')) {
  // 可以使用
}
else {
  // 用不了 呜呜呜~
}

存储空间

localStorage 和 sessionStorage 都有存储空间，万一我们设置保存的字符串长度过大，我们是需要统计当前保存空间是否已经超出了限制，如果超出了，我们需要提示用户，或者清空存储。

验证 5MB 存储空间

var a = Array(5 * 1024 * 1024).fill(0).join(''); // 超过 5MB大小的字符串

localStorage.setItem('a', a);
// VM1793:1 Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'b' exceeded the quota.

image.png

两者对比

下面我们总结一下他们的差异

localStoragesessionStorage
语法继承 Storage 原型的方法继承 Storage 原型的方法
用法存储在 localStorage 的数据可以长期保留当页面被关闭时，存储在 sessionStorage 的数据会被清除
存储大小一般都是 5Mb 不同浏览器不同5Mb
兼容性差异详细看 caniuse详细看 caniuse
Storage 事件监听发生改变都能监听发生改变都能监听

小结

这篇文章到这里就结束了，水平有限难免有纰漏，欢迎纠错。最后希望帮忙点点赞，这对我创作是无比的肯定和动力。希望可以帮到你

文章参考

developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-TW/docs/…
gist.github.com/paulirish/5…

avatar
文章
阅读
粉丝