🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

3724閲覧

SPAのキャッシュ方法について

murabito

総合スコア108

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2020/01/01 12:32

編集2020/01/13 07:00

前置き

SPAでフロント側でAPIのレスポンスをキャッシュさせたい場合について質問をさせて下さいませ。
質問で不明点がありましたら、コメント欄からお伝え頂けると嬉しいです。

質問

質問1

ユーザーログインが必須なサービスを私が勤務している会社では開発・運営しているのですが、localStorageにAPIのレスポンスをキャッシュする場として使うのは、セキュリティー的にOKなのでしょうか?

徳丸本の中には、localStorageにはユーザーの個人情報に関するデータを保存すべきではないと記載があったのですが、これは、何かアプリケーションコードに脆弱性があった場合、そこから、localStorageのデータを抜かれる可能性があるから危ないよということでしょうか。。。

localStorageに登録されているkeyを全て表示するメソッドも特にないようなので、localStorageから第3者がデータを抜き取るということは難しいように感じましたが、localStorageでキャッシュするのはログイン必須のサービスの場合は、やめた方が良いでしょうか?

質問2

Service WorkerはIE11に対応していないため、私が勤務しているところでは利用不可なのですが、Service Workerが仮に使えるとした場合、localStorageと違って、APIレスポンスをキャッシュする場として使っても安全なのでしょうか?

質問3

現在、検討しているキャッシュの方法は、localStorageのように永続化は出来ないけど、セッション中は同じAPIのレスポンスを使いまわせるように、メモリー内、または、VuexのstoreやReduxのstoreに保存しておく方法を検討しておりますが、どのくらいのデータ量まで保存出来るものなのでしょうか?

利用者の環境依存になると思うのですが、利用者の環境が保持出来るデータ量を超えた場合、単に溢れた分が消えていくだけで済むのでしょうか?それとも、何かアプリケーションエラーが発生し、動かなくなったりするのでしょうか?(※ウェブサービスの話となります)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

セキュリティに関してはどこまでやっても完璧は無いので難しいと思いますが、
localStorageやindexedDBに個人情報やログイン情報などを保存する場合、
暗号化して保存し、キーの管理はサーバーサイドで行うなどをすることで
機材の紛失や盗難などに備えることが出来ます。

投稿2020/01/20 16:11

keisukeh

総合スコア657

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

localStorageに登録されているkeyを全て表示するメソッドも特にないようなので

いえ、Storage.prototype.key(num)というメソッドがあります(MDN)。これを使えば、どんなキーがあるかの取得も可能です。

投稿2020/01/13 07:51

maisumakun

総合スコア145967

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問