JavaScriptを使用したデータ永続化について

Question

Webのアーキテクチャについては知見が浅いのので
試行錯誤しておりますが、例えば以下のようにコードがあるとします。

  <script>
    var x = 0;
    $(document).ready( function() {
      console.log('onload x = ' + x);
    });
    $('.btn').on('click',function(){
      x = x + 1;
      console.log('onload x = ' + x);
    });

すると、ボタンクリック中はxの値はどんどんインクリメントされていきますが、
F5で更新するとまた0に戻ります。

これは<script>タグがページ更新時にまた一からロードされるため、
という認識で合っていますでしょうか？

とすると、JavaScriptで「一度セットされた情報」を永続化したいと思ったら
以下のいずれか、もしくは別に最適な方法がありますでしょうか？

１．クッキー（一番一般的な方法？）
２．ローカルストレージ？（これから調べようと思ってます）

やりたいこととしては、該当ページに戻ってきた時に前回選択したボタンを
Activeにしたいな、と思っております。

あるいは世間一般にはもう少しトレンドだったり、スマートな手法があるのでしょうか？
ご提示いただけたら、調べていきたいと思っております。

以上、よろしくお願いいたします。

Answer 1

質問は解決していますが、
「この条件下では何を選ばなければならないか」へのフォーカスに対しての回答は少なさそうなのでぶら下げておきます。

• 情報量
• 失うとどれほどのダメージがあるのか
• 生存期間はどれほどのものか
• 誰に共有出来るべきか
• 公開しても良いものか、秘密にしなければならないのか

---

質問文の候補に上がっているクッキー、ローカルストレージは下記の共通点があります。

• 保存出来る量は少なめ
• 生存期間は短く、数ヶ月でほぼ確実になくなってしまう
• ブラウザに保存する(PC・スマホ間での共有が出来ない、他人に見せられない)

クッキーはdocomo社が出していたいわゆるガラケーに備わっている、
i-modeというブラウザには存在しませんが、そんなマイナーなブラウザ以外はほぼ全てに対応しています。
他にもローカルストレージは多くのブラウザに採用されており比較的安牌です。

それ以外はブラウザに保存する仕組みで汎用的な機能は選択肢は無いと思った方が良いですね。

スマホなら絶対に入っているChromeやSafari狙い撃ちで特定の機能に特化させる選択肢はあると思います。
業務で使っているならブラウザの縛りを入れておけばあまり問題にはならないと思います。

---

クッキー、ローカルストレージの機能について見ていきましょう。
これらは確かに「永続」という名目で保存は出来ます。

しかし、ブラウザが更新されたり、汚れてるので綺麗にしたりという形で、何らかの形で消去されやすい存在です。
質問文のようなチェック状態が「保存されると便利かもしれない」程度のものなら兎も角、
何かのはずみで消えてしまうとユーザーが絶望するようなレベルの情報は絶対に保存してはなりません。

情報量は少ないが、永続化・公開化できれば良いとならば
「GETパラメータ」で解決できます。

例えばゲームのステータス計算機なんかで、
他人にこういうセッティングにすると強いよと教えたいみたいなケースでは、
URLの?以降に情報を載せまくって、ページをロードしたらそこの文字列を読み取って復元させるというケースで主に利用されています。

数百文字くらいしか保存出来ませんので、活用する際はID振って少ない文字列で収まるような工夫を入れましょう。

---

それ以外のクッキー、ローカルストレージでは解決できなさそうな全ての問題は
基本的にはWebサーバに「POST」で情報を送信して、Webサーバ上に保存するやり方になります。

掲示板、ブログ、SNS、ゲームの成績なんかは仕組み上、
不特定多数から集めた情報を保管して、また不特定多数にくばる必要がありますね。
今まで挙げた選択肢では絶対に解決出来ません。

クライアントサイドでやっているように見せかけるという手法は存在します。
「Ajax通信」を利用して後付けで情報を取得してページを書き換える手法です。
JavaScriptにはXMLHttpRequestやFetch APIといった機能が存在します。
これらの機能を活用し、裏でHTTP通信を投げるという機能ですが、結果を文字列で受け取り、文字列に従ってページを更新出来るよという考え方です。

実際に利用する際は、自前でAjax通信を待ち受ける専用Webサーバ(REST API)を用意するのがスタンダードですが、
今回の件はWebサーバを建てる程の事か？メンテナンスが面倒……
というケースの為にAWSやGoogleのクラウドサービスである
S3やLambda、Firebase
を採用して使った分だけお金を支払うケースは多いですね。

Comments

[kyoya0819]

firebaseは書き込み・読み込みをAjaxではなく関数で書くはずでしたが、、
それとも内部での話でしょうか？

参考
https://firebase.google.com/docs/database/web/read-and-write?hl=ja

[miyabi-sun]

そうですね、認証機能もあったりデータを扱う統合パッケージみたいな側面が大きいですが
コードの実装は兎も角、内部的な話は裏でHTTP通信発射して画面書き換える所は同じということで文章にしました。

読み直してかなり微妙な書き方だったので修正入れました。

[websoler]

たくさんの情報ありがとうございます！
デスクトップアプリの文化に寄せたいので最終的なソリューションとしては
クライアントサイドに極力寄せたい・・というのがあるのですが、
とはいえ、ベースとなるのは通常のWebアーキテクチャのお作法と思っているので、
もろもろ勉強しております。

今回の件は「どのボタンを押したか」をそのページに戻ってきたときに復元したいのですが、
ライフサイクルとしては操作を一旦辞めたら（OKで情報を確定したり、あるいはキャンセルでやめたり）、消えてしまったオッケーなものです。

制御端末に表示する画面で、不特定多数の人が触るので、逆に前の人の操作状況が
ずっと残っていると都合が悪いというのもあります。

なので、OK,キャンセル、関係ないページへジャンプ、の契機で解除したいのです。
Lambdaにも非常に関心はあるのですが（クラウドをローカルにデプロイするとか？）、
皆様のご意見からすると、今回の私の要件だとクッキーが最も適切・・なんだろうなと思っております。

注目点（情報量、ライフサイクル等）のご提示もありがとうございました、
おかげさまで自身の要件が整理出来てきたように思います。

[websoler]

さらに補足で・・・

ローカルストレージ→自分で解放コードを必要な場所すべてに記述する必要あり
セッションストレージ→セッションというライフサイクル、タブのクローズという契機が要件に適合ならOK
クッキー→ライフサイクルを時間指定できる。もしくはURLパス指定でライフサイクルを閉じれる。

以上のことからすると、本要件にはクッキーによる時間指定が最もシンプルに適用できそうです。
時間とパスのアンド条件が一番適切そう・・

[websoler]

もう一つおまけで・・

https://teratail.com/questions/101774
↑こちらによると、

「Cookie関係のHTTPヘッダはHTTPというプロトコルで動作するように設計されています。
従って、Cookieはfileスキームでは使用できません。」

とありますので、「デスクトップアプリになるべく寄せたい」という観点からすると
クッキーよりもローカルストレージの方が良さそうです。
（サーバパワーを使わない→面倒ごとが増える、の悪循環に落ちそうな予感はありますが・・・)

Answer 2

やりたいこととしては、該当ページに戻ってきた時に前回選択したボタンを

Activeにしたいな、と思っております。

これだったらCookieを使うのが一般的だと思います。
ebsffzalさんが提案されているその他の方法でもできますが、わざわざそこまでするほどのものか？という感じです。
あくまで、これ単体の機能の場合ですが

Comments

[websoler]

ありがとうございます、やはりクッキーが一般的なのですね。
ebsffzalさんへの回答にも記述しましたが、やりたいことからすると、

１．まず、普通にクッキーなんだろう。
２．でもOfflineWebApplicationsが気になる。

という感じですので、両方調べていこうと思います。
ありがとうございます。

[kyoya0819]

綺麗にまとまったサイトがあったので貼っておきます。
http://www.tohoho-web.com/html5/offline.html

[oikashinoa]

聞きなれないなぁと思ったら、AppCacheのことみたいですね。
もう非推奨(Service Workerを使いましょう)とのことなので、忘れてもいいと思います。

[アプリケーションキャッシュの使用]https://developer.mozilla.org/ja/docs/Web/HTML/Using_the_application_cache

[websoler]

おぉ、ありがとうございます、ふぅむ、もともとブラウザにあるキャッシュ機能を
ユーザプログラムから叩く感じなんでしょうか。
現在はService Workerという技術が使われてると但書ありますね・・

制御端末に表示する画面を作りたいんですが、制御端末自体自律移動するので
ローミングによりネットワークが弱くなったりするんです。
もともとの質問と異なりますが、この点からちょっとService Worker の方を
調べてみようと思います。情報ありがとうございます！

[oikashinoa]

Service Workerは難易度高いのでasuchi0819さんが言うようにCookieを使って他の部分を仕上げてから、物足らなかったらService Workerなどに手を出したほうがいいですよ。

[websoler]

AppCache、なるほど、名は体を表す的にわかりやすいです。
Webページとかじゃなく、Webアプリとしてキャッシュするんですね。
非推奨らしいので、ServiceWorkerの方をしらべてみます〜

[websoler]

ふむ、なるほど、たしかに・・まだクッキーすら使いこなせてないので・・
素直にクッキーから着手してみます。

Answer 3

javascriptでのデータ保持の為の永続化については
すでにお気づきの方法の他、各種方法があります。

例えばですが、

・WebStorage(localStorage/sessionStorage)
・クッキー
・IEUserData(IE限定)
・OfflineWebApplications(HTML5)
・WEBデータベース(APIとして提供されている範囲)
・サーバ側にデータ保持(AJAX等で保持)

等がありますが、具体的には開発内容だったり、やりたいことや
開発規模等で選択するといいかもしれません。

Comments

[websoler]

ご回答ありがとうございます。
なんと、一杯アーキテクチャがあるんですね・・

方針としまして、
１．ブラウザ依存したくない
２．なるべくクライアントサイドで処理したい
という感じですので、クッキー・・よりは、ローカルストレージなのかな？
と思っておりましたが、
OfflineWebApplications
↑これ気になりますね。

制御器の液晶に取り付けた画面を作りたいなーと思っており、
「Webアーキテクチャを導入したい」のです。デスクトップアプリ？

なんとなくSPAとか、はやりのキーワードは目にするし、Webアーキテクチャが
デスクトップアプリに寄ってきてる感じがするので、まず、ベースの
HTMLアーキテクチャを抑えておこうと思って質問させていただきました。

ありがとうございます、ちょっとOfflineWebApplicationsを調べてみます。

[ebsffzal]

OfflineWebApplicationsについては、私自身も詳しくはわかっていなかったです(すみません、、)
簡単に解釈すると、端末がオフラインの時にはlocalStorageにデータ保持し、
オンラインになった際に通信等でサーバ保持するような方法(概念？)らしいです。

どちらにしてもあまり見かけないワードですし、使用/未使用に限らず
一度調べてみるといいかもしれません。

サクっと実装するのが目的なら、やはりcookieでいいと思いますよ。

[websoler]

ありがとうございます、なるほど・・ネットが調子悪いときでもなんか
「まだ繋がってるよ」と見せかけるためのアーキテクチャかもですね、OfflineWebApplicatoins。
そうすると、ちょっとやりたいことと方向性が違うかもです。
クッキーが自然でしょうかね〜。