JavaScriptでcookieを操作する方法~基礎編~
JavaScriptとcookie
JavaScriptではcookieの取得、保存、削除を行うことができます。
ここではcookieとJavaScriptでのcookieの取得、保存、削除の方法を紹介していきます。
cookieとは?
cookieとは、ブラウザに保存される小さなデータのことであり、cookieのデータはブラウザとWebサーバーの間で送受信されます。主にSNSサイトなどでユーザーのログイン情報などを管理するのに使用されます。cookieは基本的にブラウザとWebサーバーの間でデータをやりとりするものですがJavaScriptからも操作ができます。
JavaScriptでcookieデータを扱う場合は、とあるWebサイトに何度訪問しているのか、ボタンをクリックしたことがあるなどを保存できます。
JavaScriptでCookieを操作する方法
JavaScriptでcookieを操作する方法は2パターンあります。
1つはJavaScriptのみでコードを記述する方法、もう一つはjs-cookieというオープンソースのライブラリを使用する方法です。
この2つの方法のcookie操作について紹介します。
JavaScriptのみでコードを記述する場合
js-cookieを使用しない場合のcookie操作方法を紹介します。
cookieにデータを保存する
JavaScriptからブラウザのcookieにアクセスするにはdocument.cookieを使用します。
実際のサンプルコード
document.cookie = 'name=東京';
このコードではnameというcookie名に東京という値を付与しています。
注意点はcookieへセットする値はセミコロン、カンマ、空白は含むことが出来ません。そのため、encodeURIComponent()メソッドを使用し、値をエンコードすると安全にセットできます。
実際のサンプルコード
document.cookie = 'cookie_name=' + encodeURIComponent('tokyo tower');
cookieのデータを取得する
cookieに格納されているデータはString型であるため、Stringオブジェクトのメソッドを活用します。
また、cookieに複数のデータが格納されている場合は、;で区切られています。なのでsplit(';')を使用し1つずつに分けて配列化を行う必要があります。
配列化を行った後、split('=')を実行することでそれぞれのデータをcookie名と値に分けます。このようにすることで、cookieのデータにJavaScriptからアクセスしやすくなります。
実際のサンプルコード
let r = document.cookie.split(';');//split(';')を使用しデータを1つずつに分ける
r.forEach(function(value) {
let content = value.split('=');//split('=')を使用しcookie名と値に分ける
console.log(content[0]);
})
cookieのデータを削除する
JavaScriptにはcookieを削除するメソッドがないため、cookieに有効期限を活用して削除します。有効期限をつけることで期限が切れたら自動的に削除されます。
実際のサンプルコード
document.cookie = 'name="東京"; max-age=0';
削除する対象として、name="東京"を記述後、max-age=0と指定することで削除が可能となります。
max-age=0は有効期限が0秒を意味していますので、削除ができます。
cookieに設定できるオプション属性
先ほど有効期限としてmax-age=0を指定しました。
この他にも様々なオプション属性が指定できるため、紹介します。
またcookieにオプション属性を設定するには以下の通りとなります。
document.cookie = 'name="xxx"; オプション属性';
xxxにはcookie名が入ります。
js-cookieを使用したcookieを操作する方法
js-cookieを使用することでJavaScriptでcookieを手軽に操作することができます。また、js-cookieを使用するにはjs-cookieを外部JavaScriptファイルとして読み込む必要があります。
js-cookieを使用しcookieデータを操作する方法を説明します。
js-cookieを使用しcookieデータを保存する
js-cookieを使用しデータを保存するには以下のようにコードを記述します。
Cookies.set('cookie名','値');
実際のサンプルコード
Cookies.set('tour','東京');
このコードはcookie名「tour」に値「東京」を保存しています。
また、有効期限を付けてcookieを保存することができます。
サンプルコード
Cookies.set('tour','東京',{expires:5});
expiresは有効期限(日数)でありこのコードでは有効期限が5日となります。そのため5日経つとこのcookieは削除されます。
js-cookieを使用しcookieデータを取得する
js-cookieを使用しデータを取得するには以下のようにコードを記述します。
Cookies.get('cookie名');
実際のサンプルコード
Cookies.set('tour','東京');
Cookies.get('tour');
このコードはcookie名「tour」に値「東京」を保存後、Cookies.get('tour')とすることで、'東京'の文字列を取得できます。cookie名になにも指定しなければ{name: 'value'}のオブジェクトが取得できます。
js-cookieを使用しcookieデータを削除する
js-cookieを使用しデータを削除するには以下のようにコードを記述します。
Cookie.remove('cookie名')
実際のサンプルコード
Cookies.set('tour','東京');
Cookies.remove('tour');
このコードはcookie名「tour」に値「東京」を保存後、Cookies.remove('tour')とすることで、cookieデータの削除ができます。パスが設定されている場合は注意が必要であり、設定されている時削除するには以下のようにします。
Cookies.set('tour','東京', {path:''});
Cookies.remove('tour',{path:''});
パスが設定されていた場合、Cookies.removeにもパスを記述することで削除できます。
まとめ
JavaScriptでのcookieを操作する方法を紹介しました。
cookieはWebサイトでもよく使われているため操作することは重要なものとなっています。