はじめに

はじめまして。
某金融系会社でシステムテスト、ホームページのリグレッションテストを主に実施しています。
Qiitaはずっと読んでいるばかりだったのですが、やはりどの記事でも
勉強したらアウトプットが大切！
と仰っていたので、初心者もいいところですが、アウトプットの場として使わせていただければと思います。
投稿するのは恐らくJavaScriptとUiPathについてが多くなると思います。
よろしくおねがいします。
それでは。
~~Twitterは自分からは載せません……ゲームの話ばかりで恥ずかしい~~

そもそもなんでローカルストレージを学んだのか？

知るきっかけは、システムテストをしている際に、

ローカルストレージを利用して、ユーザ設定値を保存している

という機能でした。
なんとなく聞いたことあるけれども、そういえばきちんと理解したことはないな、と思い調べてみました。
また、CookieやSessionについても、きちんと理解したことはなかったので
これを期にちゃんと勉強しよう、と思った次第です。

ローカルストレージとは

ローカルストレージとは、その名の通りではありますが、各ブラウザのローカルで保存するストレージのことです。

調べた際にそのように出てきて、そりゃそうだろうよ、となったので、もう少し調べて、自分なりに解釈してみました。

Qiitaでは、 @pipiox さんが書かれた
CookieとWebStorageとSessionについてのまとめ
を参考にさせて頂きました。有り難うございます。

情報をユーザのブラウザに保存しておく機能
"key":"value"という、keyに対応したvalueが1セットで保存される
どちらも文字列でのみ保存される
自分で明示的に削除しない限り、半永久的に保存される
サーバとのやり取りは発生しない

というのがローカルストレージの特徴でしょうか。

実際に、どうやってローカルストレージにアクセスするのか

JavaScriptの簡単なコードによってアクセスが可能です。

ローカルストレージにセットするとき

localStorageプロパティの***setItem()***メソッドで値をセットします。

SetItemTest.js

localStorage.setItem(key, value);

ローカルストレージから値を取得するとき

localStorageプロパティの***getItem()***メソッドで値を取得します。
戻りはvalueに保存している文字列です。

GetItemTest.js

localStorage.getItem(key);

ローカルストレージの一つの値を削除するとき

localStorageプロパティの***removeItem()***メソッドで値を削除できます。
keyに対応するもののみを削除します。

RemoveItemTest.js

localStorage.removeItem(key);

ローカルストレージすべてを削除するとき

localStorageプロパティの***clear()***メソッドで値を削除できます。
removeItem()と違い、こちらはすべて削除します。

ClearTest.js

localStorage.clear();

以上になります。
valueにセットする際、オブジェクトを渡すこともできるそうなのですが、
私はまだどうすればよいかわからず…。

今回ローカルストレージで簡単なToDoリストを作ってみようと思ったのもありますので、
不要かな、と……。

ゆくゆくはしっかり調べて使えるようになりたいな、とは思います！
お読み頂き、ありがとうございました！