【JavaScript】WebStorageを試してみます
どうも！LSSです！！
今回はJavaScriptでWebStorageというものを試してみます。
WebStorage使用例
↑とりあえず簡単な使用例として、カウンタにしてみました。
今、この記事を読んでいるあなたが、そのブラウザでこの記事をみた回数が表示されているはずです。（初回は１）
WebStorageって？
Webページを開いているブラウザごとに、その端末（PCとかスマホとか）にJavaScriptから文字データを書き込んだり（セーブする、という認識が分かりやすいかと思います）読みだしたりします。
同じような事をするものに「クッキー」が昔からありましたが、クッキーに比べて
- 扱いやすい
- 大きい容量が扱える（クッキーは4KBまで、WebStorageは5MBまで）
- クッキーはサーバとの通信が発生、WebStorageはそれがない
といった違いがあります。
WebStorageにデータを記録しておくと、ブラウザを終了したり、PC・スマホを再起動したりしても、データがそこに残っています^^
今回のサンプルのコード
<script>// <![CDATA[
wls=localStorage;
if(isNaN(wls.d0)){
wls.d0='1';
}else{
wls.d0=(parseInt(wls.d0)+1).toString();
}
document.write(wls.d0);
// ]]></script>
※wlsとd0は任意の名前。好きに名付けてOKな部分です^^
まず、
wls=localStorage;
でWebStorageを「wls」という名前で扱う用意をします。
次にif文で
isNaN(wls.d0)
を判定していますが、
isNaN(WebStorage名.キー名)
で、「wls（と名付けたWebStorageの中に、d0というキー名のデータはない？」という問い合わせをしています。
初めてこの記事を開いた時にはもちろん無いハズなので、答えはTrueになります。
if文がTrueの場合（つまり初めてこの記事を開いた時）は、
wls.d0='1';
が実行されます。
「wls（と名付けたWebStorageの中に、d0というキー名のデータを'1'にしとく」
という意味で、これでWebStorage内に「d0='1'」というデータが書き込まれます。
かなり手軽ですね^^
if文がFalseの場合（つまり前にもこの記事を開き、d0というキーのデータが存在した場合）、
wls.d0=(parseInt(wls.d0)+1).toString();
が実行されます。
parseInt(wls.d0)は「d0というキーのデータ（文字列のはず）をparseInt関数によって数値として扱う」事になります。
parseInt(wls.d0)+1で、「d0というキーのデータを数値化したものに１を足した数値」となり、
(parseInt(wls.d0)+1).toString()で「d0というキーのデータを数値化したものに１を足した数値、をまた文字列データとして扱う」という事になります。
それを、
wls.d0=(parseInt(wls.d0)+1).toString();
で「wls（と名付けたWebStorageの中に、d0というキー名のデータ」に再度、格納しています。
簡単に言うと、初めてこの記事を開いた時にはd0に'1'が書き込まれますが、２回目にこの記事を開いた時には1+1の'2'が書き込まれるんですね。
まとめると、
※以下、水色部分は任意の名前です。
wls=localStorage;
と宣言だけしておけば、あとは
wls.d0=なんとかかんとか
だけでWebStorageへの書き込みできるし、
wls.d0
だけでWebStorageに保存したデータを読み込めます^^
変数データを扱うのとほぼ変わらない（文字列として使用する分には、ですが）手間で扱えてビックリです！
既にキーが存在するか？は
isNaN(wls.d0)
で調べる事ができます。
あと、今回のコードでは使用していませんが、「データをキーごと削除したい」場合は
wls.removeItem('d0');
で消去できます。
この時だけ、アポストロフィで挟むのを忘れないようにしなきゃですね^^;
また、
wls.key(0)
でWebStorageに保存されたひとつめのキー名が取得でき、wls.key(1)で２つめのキー名が取得できます。
活用例
大きめのデータが保存できるので、ブラウザゲームで「前回の続き」ができる事になりますね。
例えばLSSのとこで言ったら、
で、WebStorageを利用すると「昨日の続き」で超巨大迷宮をさまよう事ができますｗ
位置だけならクッキーでも記録できますが、「既に歩いたところ」「拾った宝」のデータを全てクッキーに記録するのは厳しそう。
だったのですが、WebStorageの容量なら余裕でいけそうです^^
WebStorage、存在は知っていましたが、実際使ってみると思いのほか簡単で拍子抜けしましたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
