JavaScript - Cookieの削除
こんにちは、未来のJavaScript魔法使いの皆さん！今日は、クッキーの世界への甜蜜な旅を始めましょう。これは、チョコチップのクッキー（それが欲しいですね！）ではなく、私たちのウェブ体験をスムーズにするデジタルなクッキーについての話です。JavaScriptを使ってこれらの小さなデータの粒を削除する方法を学びましょう。では、バーチャルなスパトゥラを手に取り、料理を始めましょう！
クッキーを削除する異なる方法
まず、なぜまずクッキーを削除したいのかを理解しましょう。 bakery（クッキーのテーマに合わせて！）のウェブサイトを構築しているとします。ユーザーの好みの treats を覚えるためにクッキーを使うかもしれません。しかし、彼らが新しく始めたい、または好みをクリアしたい場合はどうでしょうか？ その時はクッキーの削除が役立ちます！
JavaScriptでクッキーを削除する方法はいくつかあります。これらの方法をそれぞれ探索してみましょう。これらの方法は同じ料理の異なるレシピのように、同じ目標を達成しますが、少し異なる材料を使います。
| 方法 | 説明 |
|---|---|
| 'expires' 属性を使う | クッキーの有効期限を過去の日付に設定 |
| 'max-age' 属性を使う | クッキーの最大寿命を 0 または負の値に設定 |
| ブラウザから明示的に削除 | ブラウザにクッキーを削除するよう指示 |
では、袖をまくって、コードに取りかかりましょう！
'expires' 属性を使ってクッキーを削除する
クッキーを削除する方法の1つは、その有効期限を過去の日付に設定することです。まるでクッキーに言っているように、「あなたの時間は終わりだ！」と伝えます。以下にその方法を示します：
function deleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}
// 使用例
deleteCookie('favoriteFlavorPreference');これを分解すると：
-
deleteCookieという関数を作成し、削除したいクッキーの名前を引数として受け取ります。 - 関数内で、クッキーの値を空の文字列に設定します。
-
expires属性を過去の日付（1970年1月1日の Unix 標準時）に設定します。 -
path=/を設定することで、サイト全体の正しいクッキーをターゲットにします。
deleteCookie('favoriteFlavorPreference')を呼び出すと、まるでブラウザに「そのチョコチップの好みは、古代の歴史だ！」と伝えるようなものです。
'max-age' 属性を使ってクッキーを削除する
デジタルなクッキーを別れさせる別の方法は、max-age 属性を使うことです。これは、クッキーがどのくらいの期間存在するかのタイマーを設定することに似ています。0または負の数に設定すると、「時間が終わり、クッキー！」と言っているようなものです。
function deleteCookieWithMaxAge(name) {
document.cookie = name + '=; max-age=0; path=/;';
}
// 使用例
deleteCookieWithMaxAge('shoppingCartItems');以下はそのプロセスです：
-
deleteCookieWithMaxAgeという関数を作成し、クッキーの名前を引数として受け取ります。 - クッキーの値を空の文字列に設定します。
-
max-age=0を設定し、ブラウザに即座にクッキーを期限切れにします。 - 再次、
path=/を設定して正しいクッキーをターゲットにします。
この方法を使うと、カートのアイテムに「ありがとう、お世話になりましたが、出発の時間です！」と伝えるようなものです。
ブラウザから明示的にクッキーを削除する
ユーザーにクッキーの設定をより多くの制御を提供したい場合、ボタンやインターフェースを提供して、彼らに明示的にクッキーを削除させることができます。以下はその実装例です：
function deleteAllCookies() {
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i];
const eqPos = cookie.indexOf("=");
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;";
}
}
// 使用例
<button onclick="deleteAllCookies()">すべてのクッキーをクリア</button>このクッキー破壊プロセスを分解すると：
-
deleteAllCookiesという関数を定義します。 -
document.cookie文字列を個々のクッキーに分割します。 - 各クッキーに対して：
- クッキーの名前を抽出します。
- 各クッキーの有効期限を過去の日付に設定します。
- ボタンを提供し、クリックするとこの関数がトリガーされます。
この方法は、 bakeriesのウェブサイトに「設定をリセット」ボタンを提供するようなものです。ユーザーは新しく始めることができ、以前に試していない新しいフレーバーを探索することができます！
クッキーを削除することは便利ですが、ユーザーのプライバシーを尊重し、使用しているクッキーとその理由について明確に伝えることが重要です。常にクッキーの使用と削除に関する最善の慣行と法律要件に従ってください。
結論として、JavaScriptでクッキーを削除することは、烘焙の後片付けのようなものです。これにより、物事が整理され、新しく始めることができます。expires 属性、max-age、またはユーザーに直接制御を提供するいずれの方法を使っても、ウェブアプリケーションでクッキーを効果的に管理するためのツールを今すぐに持っています。
次回、誰かが「クッキーを削除して」と言ったとき、それは夜中の snack 攻撃の証拠を隠すことではなく、デジタルなクッキーについての話です。ハッピーコーディングをし、あなたのデジタルなクッキーが常に食用のクッキーと同じくらい素晴らしいものであることを祈っています！
Credits: Image by storyset