web-dev-qa-db-ja.com

ブラウザのウィンドウやタブを閉じたときにlocalStorageの項目を削除するにはどうすればいいですか？

私の場合：ブラウザが閉じられ、単一タブではないときに削除されるべきkey + valueを持つlocalStorage.

それが適切であれば私のコードを見てください。

//create localStorage key + value if not exist
if(localStorage){
   localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"}; 
}

//when browser closed - psedocode
$(window).unload(function(){
  localStorage.myPageDataArr=undefined;
});
javascriptjqueryhtml5local-storage
332
Yosef

delete演算子ではなく、そのようにしてください。

localStorage.removeItem(key);
694
Yosef

windowグローバルキーワードで使用： - 

 window.localStorage.removeItem('keyName');
92
vineet

JavaScriptでbeforeunloadイベントを利用することができます。

Vanilla JavaScriptを使用すると、次のようなことができます。

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

これにより、ブラウザウィンドウ/タブが閉じる前にキーが削除され、ウィンドウ/タブを閉じる操作を確認するように求められます。これであなたの問題が解決することを願っています。

注：onbeforeunloadメソッドは文字列を返します。

90
MT.

ブラウザを閉じるときにキーを削除したい場合は、代わりにsessionStorageを使用してください。

86
Graou13

使ってみる

$(window).unload(function(){
  localStorage.clear();
});

これがあなたのために働くことを願っています

17
Rafael Marques

LocalStorageの代わりにsessionStorageを使用することを提案しても実際には役に立たないという非常に特殊なユースケースがあります。ユースケースは、少なくとも1つのタブを開いている間に何かを保存するのと同じくらい簡単ですが、残りの最後のタブを閉じると無効になります。値をクロスタブとウィンドウに保存する必要がある場合、sessionStorageは、私が試したようにリスナーで生活を複雑にしない限り役に立ちません。それまでの間localStorageはこれには完璧ですが、ブラウザを再起動した後もデータはそこで待機しているので、作業は「うまく」行われます。私はカスタムコードとその両方を利用するロジックを使用することになりました。

説明してからコードを書いてください。最初にlocalStorageに必要なものを保存し、次にlocalStorageにも、開いたタブの数を含むカウンターを作成します。これは、ページがロードされるたびに増加し、ページがアンロードされるたびに減少します。ここで使用するイベントを選択してください。ロードとアンロードをお勧めします。アンロードした時点で、カウンターが0になったら最後のタブを閉じているので、クリーンアップタスクを実行する必要があります。ここで注意が必要なのは、ページのリロードやページ内のナビゲーションとタブを閉じることの違いを見分けるための信頼できる一般的な方法を見つけられなかったことです。そのため、保存したデータが最初のタブであることを確認した後にロード時に再構築できるものではない場合、更新のたびに削除することはできません。代わりに、タブカウンタを増やす前に、ロードするたびにsessionStorageにフラグを格納する必要があります。この値を保存する前に、すでに値があるかどうかを確認することができます。そうでない場合、これは最初にこのセッションにロードすることを意味します。値は設定されず、カウンタは0です。

12
Solthun

sessionStorageを使用する

SessionStorageオブジェクトはlocalStorageオブジェクトと同じですが、1つのセッションのデータだけが格納される点が異なります。ユーザーがブラウザウィンドウを閉じると、データは削除されます。

次の例では、現在のセッションでユーザーがボタンをクリックした回数を数えます。

例

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
9
DilanG
for (let i = 0; i < localStorage.length; i++) {
    if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
        arr.Push(localStorage.key(i));
    }
}

for (let i = 0; i < arr.length; i++) {
    localStorage.removeItem(arr[i]);
}
6
Gil Snovsky

一部のユーザーは既にこの質問に回答していますが、この問題を解決するためのアプリケーション設定の例を示しています。

私は同じ問題を抱えていました。私は私のangularjsアプリケーションで https://github.com/grevory/angular-local-storage moduleを使用しています。次のようにアプリを設定すると、変数はローカルストレージではなくセッションストレージに保存されます。したがって、ブラウザを閉じるかタブを閉じると、セッションストレージは自動的に削除されます。あなたは何もする必要はありません。

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

それが役立つことを願っています。

4
user1012513

なぜsessionStorageを使わなかったのですか？

「sessionStorageオブジェクトはlocalStorageオブジェクトと同じですが、1つのセッションのデータだけが保存される点が異なります。ユーザーがブラウザウィンドウを閉じるとデータが削除されます。」

http://www.w3schools.com/html/html5_webstorage.asp

3
wjfinder77

Window.onbeforeunloadイベントはブラウザ/タブが閉じているとき（WHICH IS REQUIRED）だけでなく他のいくつかのイベントでも呼び出されるので、ここで提示された解決策は100％正しいとは思いません。 （必要ないかもしれません）

Window.onbeforeunloadを発生させることができるイベントのリストに関する詳細については、このリンクを参照してください -

http://msdn.Microsoft.com/ja-jp/library/ms536907(VS.85).aspx

3
miztaken

質問の6年後にこの質問を見たところ、この質問に対する十分な答えはまだないことがわかりました。これにより、次のすべてが達成されます。

  • ブラウザ（またはドメインのすべてのタブ）を閉じた後にローカルストレージをクリア
  • 少なくとも1つのタブがアクティブなままの場合は、タブ間でローカルストレージを保持
  • 単一のタブをリロードするときにローカルストレージを保持

上記を実現するために、各ページのロードの開始時にこのJavaScriptの一部を実行してください。

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

編集： /ここでの基本的な考え方は次のとおりです。

  1. 最初から始めるとき、セッションストレージはtabidと呼ばれるキーでランダムなIDを割り当てられます
  2. ローカルストレージは、オブジェクトを含むtabsというキーで設定され、それらのキーtabidは1に設定されます。
  3. タブがアンロードされると、ローカルストレージのtabsは、0に設定されたtabidを含むオブジェクトに更新されます。
  4. タブが再ロードされると、最初にタブがアンロードされてから再開されます。セッションストレージのキーtabidが存在するため、ローカルキーのサブキーがtabsのローカルストレージのtabidキーも存在するため、ローカルストレージはクリアされません。
  5. ブラウザがアンロードされると、すべてのセッションストレージが消去されます。セッションストレージを再開すると、tabidはもう存在しなくなり、新しいtabidが生成されます。ローカルストレージはこのtabidのサブキーも他のtabidのサブキーも持っていないので（全てのセッションは閉じられています）、それはクリアされます。
  6. タブを新しく作成すると、セッションストレージに新しいtabidが生成されますが、少なくとも1つのtabs [tabid]が存在するため、ローカルストレージは消去されません。
3
Hacktisch

ローカルストレージで作業するときにブラウザをサポートしているかどうかを確認するための簡単なテストは次のとおりです。

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

期待通りに動作しました（私はGoogle Chromeを使用しています）。から適応： http://www.w3schools.com/html/html5_webstorage.asp 。

3
rdonatoiop

これは古い質問ですが、上記の答えがどれも完璧ではないようです。

ブラウザを閉じたときにのみ破壊される認証や機密情報を保存したい場合は、クロスタブメッセージの受け渡しをsessionStorageとlocalStorageに頼ることができます。

基本的には、アイデアは以下のとおりです。

  1. 前のタブを開かずにブートストラップします。したがって、localStorageとsessionStorageは両方とも空です（そうでない場合は、localStorageを消去できます）。メッセージイベントリスナをlocalStorageに登録する必要があります。
  2. ユーザーはこのタブ（またはドメインで開かれている他のタブ）で機密情報を認証または作成します。
  3. 機密情報を格納するためにsessionStorageを更新し、この情報を格納するためにlocalStorageを使用してから削除します（データが変更されたときにイベントがキューに入れられたため、ここでタイミングについては気にしない）。その時点で開かれている他のタブはメッセージイベントに対してコールバックされ、機密情報でそれらのsessionStorageを更新します。
  4. ユーザーがドメインで新しいタブを開くと、そのsessionStorageは空になります。コードはlocalStorageにキーを設定する必要があります（例：req）。他のすべてのタブはmessageイベントでコールバックされ、そのキーを見て、もしあればそれらのsessionStorageからの機密情報で答えることができます。

このスキームは壊れやすいwindow.onbeforeunloadイベントに依存しないことに注意してください（これらのイベントが発生しないでブラウザを閉じる/クラッシュさせることができるため）。また、機密情報がlocalStorageに格納される時間は非常に短いため（クロス集計メッセージイベントのトランジェント変更検出に依存しているため）、そのような機密情報がユーザーのハードドライブに漏れることはほとんどありません。

これはこの概念のデモです： http://jsfiddle.net/oypdwxz7/2/ /

0
xryl669