diadia

興味があることをやってみる。自分のメモを残しておきます。

cookieやlocalStorageを操作するには?

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

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

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

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

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

1. javascriptcookieを操作する方法

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

document.cookie = "key=value";

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

let cookies_get = document.cookie;

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

// max-age=0を設定する
document.cookie = "key=; max-age=0"
javascriptcookieを操作する方法を紹介した資料

cookieをjavascriptで設定、取得、削除する簡単な方法

2. javascriptでsessionStorageを操作する方法

1 データの保存

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

2 データの取得

sessionStorage.getItem('key')

3 データの削除

// キーを指定して削除
sessionStorage.removeItem('key')
// 初期化
sessionStorage.clear()
sessionStorageの使い方を説明した資料

sessionStorageをつかってみる - Qiita

3. javascriptでlocalStorageを操作する方法

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

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

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

localStorage.getItem('キー');

3 データの削除

// キーを指定して削除
localStorage.removeItem('キー');
// 初期化
localStorage.clear()
localStorageの使い方を説明した資料

https://www.granfairs.com/blog/staff/local-storage-01:titlle