Q&A
この場合の「ローカル」とは
定義を明確にしてください
###前提・実現したいこと
はてなブックマークのように、ユーザーがお気に入りリストを保存できるサイトを作っています。
そのデータをユーザーがブラウザにローカルで保存しておく方法として、どちらが適しているか知りたいです。
【A】「IndexedDB」を使う方法
【B】「ただの変数」を使う方法
わたしは次の設計案であれば【B】が適していると考えたのですが、これについてアドバイスを頂けませんでしょうか。
（「ローカル」というのは「ネットワーク通信なし」という意味で使わせて頂きます。）
###お気に入りリストの設計案
①お気に入りリストはローカルに全件保存し、ソートや検索を早くしたいという思いです。
②件数は多くて数万件で、もしローカルの許容量をオーバーした場合は全件は保存せず、DBから通信してその都度ソートや検索しようと思っています。
③サイト内のページ遷移はすべてAJAXで行います。
④サイトにアクセスしたときは、まずローカルのお気に入りリストを削除して、次にDBから通信してお気に入りリストを取得して、ローカルに保存します。（もちろん【B】の場合は削除のステップはありません。）
###【B】が適していると考えた経緯
一晩かけて【A】の「IndexedDB」を使う方法を調べまして、「localforage」と「Dexie」というライブラリをそれぞれ実装して試してみました。
このうち「Dexie」は普通のSQLのようにインデックスを効かせることができて便利なのでほぼ実装完了までいったのですが、LIKE検索ができないのだと気づきました・・・・涙
そのため正規表現で.filterを使う方法となり、微妙だなぁと悩んでいたところ見つけたのが、【B】の「ただの変数」を使う方法です。
そのライブラリが「List.js」というものでして、こちらはどうやらインデックスを効かせることができる上、LIKE検索もできるようで、現在はこいつを実装している途中。
というのが経緯です。
###質問
前置きが長くてすみません。質問です。
■Q1
「List.js」がデータを保存するのは、「ただの変数」という解釈はあっていますか？間違っているのなら、どこに保存されているのでしょうか？
（「localStorage」にもないし「IndexedDB」にもないので、「ただの変数」に保存されているのだろうという予想です）
■Q2
もし「ただの変数」に保存されるのであれば、数メガしか入らない「IndexedDB」と比べて、「ただの変数」なら1ギガくらい入ると思います。上記の設計案でしたら「ただの変数」の方が絶対にいいと思うのですが、いかがでしょうか。問題やデメリットはありますか？
■Q3
この「localforage」「Dexie」「List.js」以外に、上記の設計案にピッタリそうなものはございますか？（Reactやview.jsというものは使えず、JavaScriptかjQueryで考えています。）
以上になります。
ご回答どうぞ宜しくお願い致します。
indexedDBは、ブラウザ依存のため、
ブラウザ変えると、取得できませんが、その認識はされていますか？
ローカルはネットワーク通信なしという意味でした。失礼致しました。
ブラウザの件アドバイスありがとうございます。初心者につきそういったアドバイス大変助かります。
以下1から6の流れで考えており問題ないという認識なのですが、何か勘違いありそうでしたらご指摘いただけますでしょうか？
1.操作
Chromeでアクセスする
↓
2.処理
ネットワーク接続してDBから値を取得し、それがIndexedDBに保存される
↓
3.操作
画面にある記事をお気に入りリストに新規保存する
↓
4.処理
サーバーのDBもフロントのIndexedDBも更新される
↓
5.操作
Firefoxでアクセスする
↓
6.処理
ここで2と同じ処理がされるため、別のブラウザでも同じデータが維持される
と、このように考えています。
質問は編集できますので。
みたいですね。編集しておきました。ご指摘ありがとうございました。
というかここは「質問への追記修正依頼」なので、指摘に対しては質問本文に反映して返すのが自然です。
そうでしたか。それは重ねて申し訳ございませんでした。以後気を付けます。
回答2件
0
ベストアンサー
List.jsは使用したことありませんがおそらく・・・
まず、IndexedDBはデータベース、List.jsはリスト操作ライブラリ、と、全く異なるものを並べて考えているように思いますがそこの認識は問題ないでしょうか。
■Q1
ただの変数なのではないでしょうか。つまりブラウザを閉じると情報が消えると思います。
■Q2
ブックマーク情報を、ブラウザを閉じた後に復元する必要がなければ、List.jsだけでいいんじゃないでしょうか。
ただ恐らくブックマーク情報は保存したいと思うので、どこかに保存する必要があり、その先がIndexedDBなどになると思います。
IndexedDBなどに保存した情報を一旦全てnyoronyoronyoroさんのいう変数に格納し、それをList.jsで操作するといったこともできると思います。
■Q3
ライブラリはわかりませんがindexeddbのほかにlocalstorageというローカルデータベースもあります。
追記
ローカルに保存して、とあるのでオフラインでも操作できるような作りと思いましたが
もしオンライン専用で、必ず最初にサーバーと通信するというなら、IndexedDBなどのデータベースは不要だと思います。つまりList.jsだけで完結すると思います。
投稿2020/11/25 01:22
編集2020/11/25 01:26
総合スコア88
> まず、IndexedDBはデータベース、List.jsはリスト操作ライブラリ、と、全く異なるものを並べて考えているように思いますがそこの認識は問題ないでしょうか。
失礼致しました。並べているのは以下のつもりです。
・「IndexdDB」の値を操作する「localforage」か「Dexie」
・「ただの変数」の値を操作する「List.js」
なので並べることを不自然と考えませんでした。（また何かおかしければ教えてください。）
--
> ただの変数なのではないでしょうか。つまりブラウザを閉じると情報が消えると思います。
なるほど。ありがとうございます。
--
> ブックマーク情報を、ブラウザを閉じた後に復元する必要がなければ
仰る通り、必要ございません。
--
> localstorageというローカルデータベースもあります。
ですね。ありがとうございます。容量にかんがみて「IndexedDB」がいいかと思い、さらに容量にかんがみて「ただの変数」がいいかと思っている状況です。
--
> 追記
ありがとうございます。自分の考えに少し自信が持てました。
> なので並べることを不自然と考えませんでした。（また何かおかしければ教えてください。）
でしたら大丈夫です。
では、List.jsで機能がそろっているならなおさら、List.jsの方がいいと思います。
IndexedDBなどを使うのはオーバースペックといいますか、リスト操作的なことがしたいだけでわざわざ導入するには無駄が多く、制限など色々付きまとうことになると思います。
0
変数
変数の寿命はページを開いてから離脱(閉じる/移動/更新など)するまでです。
(正確には「ガベージコレクションがメモリから解放するまで」ですが、グローバル変数やクロージャ等で変数の寿命をページを離脱するまでに指定していると仮定しています)
なお、オフラインではサーバと通信出来ない為、お気に入りリストは0件です。
IndexedDB
IndexedDBはブラウザのストレージに保管される為、ページを開きなおしてもデータは生きています。
つまり、オフラインでもサイトを動かす事が可能です。
Re: nyoronyoronyoro さん
投稿2020/11/25 05:14
編集2020/11/25 05:24
総合スコア18166
あなたの回答
tips
プレビュー
