特定のサイトのCookieやWebStorageを削除する

2024.07.07

その他

chromeでの作業中、特定のサイト内で使用しているストレージを削除したいということがあるので、やり方をメモ。

設定方法

まずは確認用に、cookieとlocalStorage、sessionStorageの内容確認と設定を行えるデモを用意します。

<button id="cookie-add">cookie追加</button>
<button id="localStorage-add">localStorage追加</button>
<button id="sessionStorage-add">sessionStorage追加</button>

デモページアクセス時に現在の設定状態をconsoleに表示して、各ボタンクリック時に設定を行うようにしてみます。

const c = document.cookie;
console.log('cookie', c);
const l = localStorage.getItem('localstrage');
console.log('localStorage', l);
const s = sessionStorage.getItem('sessionStorage');
console.log('sessionStorage', s);
 
document.getElementById('cookie-add').addEventListener('click', function() {
    document.cookie = "cookie=test";
});
document.getElementById('localStorage-add').addEventListener('click', function() {
    localStorage.setItem('localstrage', 'test');
});
document.getElementById('sessionStorage-add').addEventListener('click', function() {
    sessionStorage.setItem('sessionStorage', 'test');
});

これで各登録と確認ができるようになりました。
ストレージ確認のデモページ

ブラウザ右上のメニューから設定を選択します。

プライバシーとセキュリティ > サードパーティ Cookie を選択します。

すべてのサイトデータと権限を表示を選択します。

右上の検索にサイトのドメインを入力すると該当のサイトに絞り込まれるので、ゴミ箱のアイコンをクリックしてCookieを削除します。

最初に作成したデモページで確認したところ、cookieとlocalStorageに関しては削除を確認できましたが、sessionStorageの削除が確認できませんでした。
ただ、sessionStorageのみ値を設定した状態で削除画面を確認するとサイトが表示されないようだったので、そもそもsessionStorageはこの画面での管理対象外なのかもしれないです。