5分間のインタビューの質問-LocalStorageとSessionStorgeの類似点と相違点

序文

聖金曜日、兄弟たち。最近の主要工場での一時解雇の波の後、一緒に勉強していた若者たちは、卷続ける意欲を失いました。今日も、みんなが面接の質問に駆けつけました！！！

技術界の現状については、ユーザーのポートレートを分析したところ、ほとんどのユーザーが短頻度でペースの速い記事を好むと感じたので、簡単な面接の質問を最短時間で掘り起こし、その背後にある知識を整理して共有するようにしています。フォローアップの面接の過程で私はあなたを助けたいと思っています。もしそれがあなた自身の知識の盲目の領域であるなら、あなたはそれをサポートしたいかもしれません。

バックグラウンド

最近の面接の過程で、履歴書から得意なことや精通していることを知り、深いコミュニケーションをとることが難しいことが多いので、八股文基本的なことを聞いて、候補者のシンプルな理解の深さを確認する必要があります。点。今回は、フロントエンドで一般的に使用されるWeb storage APIローカルこれら2つの一般的に使用される機能の違いについて質問します。

ストレージAPIの使用

ここで、両方が実際には同じプロトタイプオブジェクトを持っていることに注意してくださいStorage。面接の過程でこれに答えられれば、かなりのボーナスになると思います！

Web Storageには、次の2つのメカニズムが含まれています。

sessionStorage ページセッション中に利用可能な、指定されたオリジンごとに個別のストレージ領域を維持します（つまり、ページのリロードと復元を含め、ブラウザが開いている限り）。
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页相关

兼容性差异

验证当前浏览器是否可用

从上面 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.
复制代码

两者对比

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

	localStorage	sessionStorage
文法	`Storage`プロトタイプメソッドの継承	`Storage`プロトタイプメソッドの継承
利用方法	保存されたデータ`localStorage` は長期間保持できます	ページを閉じると `sessionStorage` 、保存されているデータが消去されます
ストレージサイズ	一般的に5Mb、ブラウザが異なれば異なります	5Mb
互換性の違い	カニウスを詳しく見てください	カニウスを詳しく見てください
ストレージイベントリスナー	変更を監視できます	変更を監視できます

まとめ

この記事はここで終わります。レベルが限られているため、間違いがあります。訂正を歓迎します。最後に、あなたが私を助けてくれて、私に親指を立ててくれることを願っています。これは私の創造の大きな肯定と動機です。私はあなたを助けることができると思います

記事参照

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