ブラウザウィンドウ/タブが閉じているときにlocalStorageアイテムを削除するにはどうすればよいですか？

私のケース：キーと値を含む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;
});

削除演算子ではなくそのように実行する必要があります：

localStorage.removeItem(key);

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

 window.localStorage.removeItem('keyName');

beforeunloadJavaScriptでイベントを利用できます。

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

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

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

注：onbeforeunloadメソッドは文字列を返す必要があります。

ブラウザーを閉じたときにキーを削除する場合は、代わりにsessionStorageを使用する必要があります。

使ってみてください

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

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

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

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

sessionStorageを使用する

sessionStorageオブジェクトは、1つのセッションのデータのみを格納することを除いて、localStorageオブジェクトと同じです。ユーザーがブラウザウィンドウを閉じると、データは削除されます。

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

例

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.";

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

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

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

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

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

それがお役に立てば幸いです。

5つの方法から選択できます。

• setItem（）：キーと値をlocalStorageに追加します
• getItem（）：localStorageからキーによって値を取得します
• removeItem（）：localStorageからキーによって項目を削除します
• clear（）：すべてのlocalStorageをクリアします
• key（）：localStorageのn番目のキーを取得するために数値を渡しました

このメソッドを呼び出すと、clear（）を使用して、そのドメインのすべてのレコードのストレージ全体をクリアできます。パラメータを受け取りません。

window.localStorage.clear();

ローカルストレージを使用するときにブラウザがサポートされているかどうかを確認する簡単なテストを次に示します。

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。

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

window.onbeforeunloadを起動できるイベントのリストの詳細については、このリンクを参照してください。

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

sessionStorageを使用しないのはなぜですか？

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

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

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

• ブラウザ（またはドメインのすべてのタブ）を閉じた後、ローカルストレージをクリアする
• 少なくとも1つのタブがアクティブなままの場合、タブ間でローカルストレージを保持する
• 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. 最初から開始すると、セッションストレージには、呼び出されたキーのランダムなIDが割り当てられます tabid
2. 次に、ローカルストレージは、tabsキーtabidが1に設定されているオブジェクトを含むと呼ばれるキーで設定されます。
3. タブがアンロードされると、ローカルストレージが0に設定tabsされたオブジェクトに更新tabidされます。
4. タブが再ロードされると、最初にアンロードされて再開されます。セッションストレージのキーtabidが存在し、ローカルストレージtabsのサブキーを持つローカルストレージキーも存在するため、tabidクリアされません。
5. ブラウザがアンロードされると、すべてのセッションストレージがクリアされます。セッションを再開すると、ストレージtabidはもう存在せず、新しいものtabidが生成されます。ローカルストレージにはthisのサブキーがないため、tabid他のtabid（すべてのセッションが閉じられていたため）、クリアされています。
6. 新しく作成されたタブでtabidは、セッションストレージに新しいタブが生成されますが、少なくとも1つのtabs[ tabid]が存在するため、ローカルストレージは消去されません

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

ブラウザーを閉じたときにのみ破棄される認証情報や機密情報を保存したい場合はsessionStorage、localStorage、クロスタブのメッセージパッシングのため。

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

1. 以前に開いたタブがないためブートストラップを実行しているため、localStorageとの両方sessionStorageが空です（そうでない場合は、をクリアできますlocalStorage）。にメッセージイベントリスナーを登録する必要があります。localStorage。
2. ユーザーは、このタブ（またはドメインで開いている他のタブ）で機密情報を認証/作成します。
3. を更新しsessionStorageて機密情報を保存し、を使用しlocalStorageてこの情報を保存してから、それを削除します（データが変更されたときにイベントがキューに入れられたため、ここでタイミングを気にする必要はありません）。そのときに開かれた他のタブはすべてメッセージイベントでコールバックされsessionStorage、機密情報で更新されます。
4. ユーザーがドメインで新しいタブを開いた場合、そのタブはsessionStorage空になります。コードは、localStorage（例：）にキーを設定する必要がありますreq。他のすべてのタブはメッセージイベントでコールバックされ、そのキーを確認し、sessionStorage（3のように）それらの機密情報があれば、それらの機密情報で応答できます。

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

これがこのコンセプトのデモです：http : //jsfiddle.net/oypdwxz7/2/

ブラウザのクローズを検出する方法はないので、おそらくブラウザのクローズでlocalStorageを削除することはできませんが、ブラウザのクローズ後に破壊されるため、sessionCookiesを使用してできることを処理する別の方法があります。これは私のプロジェクトに実装されています。

単にsessionStorageを使用できます。ブラウザウィンドウが閉じられるときに、sessionStorageがすべてのキー値をクリアできるからです。

そこを参照してください：SessionStorage- MDN

次のコードを試して、ローカルストレージを削除できます。

delete localStorage.myPageDataArr;