cookieやlocalStorageを操作するには？

アンドロイドアプリを作る場合はアプリのストレージ領域に暗号化したTokenを保管し、通信を行うときだけそれを引っ張り出してリクエストヘッダにセットして通信を行っていた。クライアントがブラウザの場合にはブラウザに保存するのでどうやって保存して取り出すのか気になる。

てことでトークンやクッキーをブラウザにセットする方法をすこし調査してみる。

また、djangoの場合はどうやってcookieにセットしているかも分かったら嬉しいけどそこまで調べきれるか、興味が続くところまでやってみる。

ブラウザにデータを保存する場合には、３種類の選択肢が存在する。

名称	有効期限	データ量	サーバへのデータ送信	memo
cookie	指定期限まで	4KB	リクエスト毎に自動送信
session storage	ウィンドウ・タブを閉じるまで	5MB	データ利用時のみ	web storageの一種
localStorage	永続的に有効	5MB	データ利用時のみ	web storageの一種

1. javascriptでcookieを操作する方法

1 データの保存 document.cookieで設定する

document.cookie = "key=value";

2 データの取得 document.cookieで取得する

let cookies_get = document.cookie;

3 データの削除 document.cookieでcookieを削除する

// max-age=0を設定する
document.cookie = "key=; max-age=0"

1 データの保存

//下記3行は全て同じ意味です。
sessionStorage.key = 'value';
sessionStorage['key'] = 'value';
sessionStorage.setItem('key', 'value');

2 データの取得

sessionStorage.getItem('key')

3 データの削除

// キーを指定して削除
sessionStorage.removeItem('key')
// 初期化
sessionStorage.clear()

1 データの保存 localStorage.setItem()を使う。

localStorage.setItem('キー', '値');

2 データの取得データの取得はlocalStorage.getItem()を使う。

localStorage.getItem('キー');

3 データの削除

// キーを指定して削除
localStorage.removeItem('キー');
// 初期化
localStorage.clear()