Webアプリを作るときに悩んだことのひとつが、「データをどこに保存するか」という点でした。
一般的にはログイン機能を作り、サーバー側のデータベースに保存する方法が多いですが、今回はLocalStorageを採用しました。
この記事では、なぜLocalStorageを選んだのか、メリットとデメリット、そして利用者への注意事項について紹介します。
LocalStorageを採用した webアプリ👇
LocalStorageを採用した理由
今回のアプリでは、「思い立ったらすぐ使える」ことを大切にしたかったためです。
ログイン画面が表示されるだけで、
- メールアドレスを登録する
- パスワードを決める
- ログイン状態を管理する
といった手間が増えてしまいます。
「ちょっと使いたいだけなのに登録が必要」という体験は、ユーザーにとってハードルが高くなることがあります。
そのため、ブラウザだけでデータを保存できるLocalStorageを採用しました。
ページを閉じても履歴が残るため、ログインしなくても継続して利用できるようになっています。
ログイン不要には安心感もある
もうひとつ理由があります。
個人的に、サービスへ登録するときに
「本当に情報は安全に管理されるのかな？」
「個人情報が漏れたりしないかな？」
と少し不安に感じることがあります。
もちろん、多くのサービスでは適切な管理がされていますが、「とりあえず試してみたい」という段階では、登録そのものを面倒に感じる人も少なくありません。
LocalStorageであれば、ユーザー情報をサーバーへ送信せず、ブラウザ内だけでデータを管理できます。
気軽に使い始められることは、大きなメリットだと考えました。
便利な反面、データが消える可能性もある
もちろん、LocalStorageにもデメリットがあります。
保存先はブラウザのため、
- ブラウザのデータを削除した
- キャッシュやサイトデータを消した
- 別のブラウザや別の端末で開いた
- プライベートブラウズを利用した
といった場合には、保存していたデータが失われることがあります。
サーバーへ保存しているわけではないため、開発者側で復元することはできません。
そのため、アプリ内でも注意書きを掲載しています
この仕様は便利な反面、利用者が知らずに使うと「データが消えた」と感じてしまう可能性があります。
そのため、アプリ内には
- データはブラウザ内に保存されること
- ブラウザデータを削除すると消える可能性があること
- 必要なデータはバックアップしてほしいこと
などを説明した注意書きを掲載しています。
便利さだけを優先するのではなく、仕様によるリスクもきちんと伝えることは、開発者として大切なことだと考えています。
まとめ
LocalStorageを採用した一番の理由は、「誰でもすぐに使えるアプリにしたかったから」です。
ログインや会員登録を省略することで、思い立ったときにすぐ使える体験を実現できました。
一方で、ブラウザ保存にはデータ消失のリスクがあります。そのため、アプリ内では注意事項を掲載し、利用者が仕様を理解したうえで使えるよう配慮しています。
アプリ開発では、「どの技術を使うか」だけでなく、「ユーザーにどんな体験を提供したいか」を考えながら設計することが重要だと、今回あらためて感じました。
LocalStorageを採用した webアプリ👇