保存したいデータに合わせて選ぶ！JavaScriptでクッキー・ローカルストレージ・セッションストレージを使い分ける
2024-04-02
クッキーとは？
JavaScriptを使ってクッキーを設定するには、document.cookieプロパティを使用します。document.cookieプロパティは、クッキーの名前と値のペアの文字列を格納します。
// クッキーの名前と値を設定
document.cookie = "name=value";
// 有効期限を設定
document.cookie = "name=value; expires=Thu, 01 Jan 2024 00:00:00 GMT";
// パスを設定
document.cookie = "name=value; path=/";
// ドメインを設定
document.cookie = "name=value; domain=.example.com";
// セキュリティを設定
document.cookie = "name=value; secure";
// クッキーを取得
var cookie = document.cookie;
// クッキーの名前と値のペアを分割
var cookies = cookie.split(";");
// 特定の名前のクッキーを取得
var cookieValue = getCookie("name");
function getCookie(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === name) {
return cookie[1];
}
}
return null;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Set and Get Cookie with JavaScript</title>
</head>
<body>
<script>
// クッキーを設定
document.cookie = "name=value";
// クッキーを取得
var cookie = document.cookie;
// 特定の名前のクッキーを取得
var cookieValue = getCookie("name");
function getCookie(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === name) {
return cookie[1];
}
}
return null;
}
// クッキーの内容を出力
console.log(cookie);
console.log(cookieValue);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Set and Get Cookie with JavaScript</title>
</head>
<body>
<h1>クッキーの設定と取得</h1>
<p>このサンプルコードは、JavaScriptを使ってクッキーを設定と取得する方法を示します。</p>
<button onclick="setCookie()">クッキーを設定</button>
<button onclick="getCookie()">クッキーを取得</button>
<p id="cookie-value"></p>
<script>
// クッキーを設定
function setCookie() {
document.cookie = "name=value; expires=Thu, 01 Jan 2024 00:00:00 GMT";
alert("クッキーを設定しました！");
}
// クッキーを取得
function getCookie() {
var cookieValue = getCookieValue("name");
if (cookieValue === null) {
alert("クッキーが見つかりません！");
return;
}
document.getElementById("cookie-value").innerHTML = "クッキーの値：" + cookieValue;
}
// 特定の名前のクッキーを取得
function getCookieValue(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === name) {
return cookie[1];
}
}
return null;
}
</script>
</body>
</html>
説明
- クッキーの設定
- 有効期限は2024年1月1日までです。
- クッキーの取得
- クッキーが見つかった場合は、その値を
cookie-value要素に表示します。 - クッキーが見つからなかった場合は、アラートを表示します。
- クッキーが見つかった場合は、その値を
実行方法
- このコードをHTMLファイルとして保存します。
- ブラウザでファイルを開きます。
- クッキーを設定ボタンをクリックします。
cookie-value要素にクッキーの値が表示されます。
- このサンプルコードは、基本的なクッキーの操作のみを説明しています。
JavaScriptでクッキーを設定・取得する他の方法
ライブラリを使用する
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
// クッキーを設定
Cookies.set("name", "value");
// クッキーを取得
var cookieValue = Cookies.get("name");
document.cookieプロパティは、クッキーの名前と値のペアの文字列を格納します。
// クッキーを設定
document.cookie = "name=value";
// クッキーを取得
var cookie = document.cookie;
// 特定の名前のクッキーを取得
var cookieValue = getCookie("name");
function getCookie(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === name) {
return cookie[1];
}
}
return null;
}
ローカルストレージは、ブラウザにデータを保存するための別の方法です。クッキーよりも多くのデータを保存することができ、有効期限もありません。
// クッキーを設定
localStorage.setItem("name", "value");
// クッキーを取得
var cookieValue = localStorage.getItem("name");
- 簡単な方法でクッキーを設定・取得したい場合は、ライブラリを使用するのがおすすめです。
- より多くのデータを保存したい場合は、ローカルストレージを使用するのがおすすめです。
- クッキーの有効期限を制御したい場合は、
document.cookieプロパティを使用する必要があります。
javascript html css
