html5でメモ帳を作りたい、メモを保存するには？

Question

前提・実現したいこと

いまhtml5とjavascriptを使ってメモ帳アプリを作りたいんですけど
ボタンを押したら保存をするという機構を作ろうとしたんですが
どのように保存をしたらいいのかが分りません
教えてください

発生している問題・エラーメッセージ

javascriptによる保存が分らない

試したこと

googleにてアプリ保存と検索sqliteと出てきたけどjavascriptとの連携が見当たらなかった
また、iosで使用ができないことからあきらめた

###追加分
monacaを利用して作ってて
最終的にはローカルアプリとして全部動かしたいです

ここにより詳細な情報を記載してください。

Answer 1

ブラウザで実現したければFile APIを使いましょう。
普通のメモ帳アプリとしては「ファイルを開く」「ファイルを上書き保存」「名前を付けて保存」の3つになると思いますが十分実現可能です。

ただし、このFile APIは中々に難解で癖があります。
多分JavaScript初心者だと全く分からんってなると思いますが、
探せばサンプルが結構転がっているのでそれを参考に試行錯誤してみてください。

またMonaca利用の場合はCordovaプラグインがあり、ファイル書き込み機能を見つけました。
File APIの機能を覚えても完全に無駄になる可能性があります。
詳しくは後述。

---

Webブラウザ(ChromeやFirefox等)の制約として
覚えておくべき前提知識が幾つかあります。

まず、ブラウザやJavaScriptはローカルのファイルを自由に読み書きできません。
これはセキュリティ上の制約です。
もしこれが出来るなら、私のサイトを訪れた貴方のパソコンから、
Cドライブやデスクトップにある適当なファイルを抜き出し、自分のサーバーにコピーすることが出来ます。
これがどのくらいヤバいかというと、ちょっと古いですが「Winnyの流出」と同レベルのヤバさです。

そこでブラウザーは<input type="file">等で指定したファイルやディレクトリを「許可された」と見なします。
この許可されたファイルやディレクトリに関してはFile APIを利用して好きな様に修正することが可能です。
このへんはFile API絡みでルールを調べれば出てきますので調べてみてください。

monacaを利用して作ってて最終的にはローカルのみで全部動かしたいです

MonacaにはMonacaのルールがあります。
あれはスマホで動作させる事を想定しているので専用の機能が多数存在します。
その象徴がCordovaプラグインですね。素のブラウザが持つ機能を強力に拡張してくれます。

公式サイトのCordovaプラグインを見るとローカルファイル読み書き機能を見つけました
一度使ってみてください。

参考サイト:

• Cordova プラグイン - 公式サイトDoc
• [Monaca] Fileプラグインについて

Answer 2

ローカルアプリなのかブラウザから使うものなのかよくわかりませんが、cookieを使用する方法が比較的楽かと思います。

参考 : JavaScriptでCookieを扱いたい時のメモ | くろひつじのメモ帳

jQueryからも使えるようです。

jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う ｜ Tips Note by TAM

ただしcookieだと保存できる容量が小さく、また保存できる期間を定めなければならないので、本格的なものを作りたければlocalStorage等の利用の検討が必要になるかもしれません。

もしどの端末からでも同一アカウントによってアクセスできるようにしたければ、サーバーを用意してPHPを用意してデータベースを用意して、、となりフロントエンド(Node.jsではないjs)の知識だけでは太刀打ちできなくなってくると思います。

#追記

私はローカルアプリは詳しくないですが、Monacaを利用する場合はSQLiteを使ってデータベースにアクセスできるみたいです。

Monaca 端末にデータを保存する方法 | ヘッドウォータース Tech Note！

SQLiteを使わなくとも、ここを見る限りlocalStorageを使っておけば良さそうですね。

また、iosで使用ができないことからあきらめた

今この一文に気づきました。。すみません。
ただ調べてみたところ、確かめてはいませんがcordovaのプラグインによってはできるみたいですよ？

MonacaアプリでSQLiteを使ってみる | モナカプレス

もう少し調べてみると他にも方法が見つかりそうです。

localStorageを使うならばもう関係のないことですがね(^ ^;

Comments

[milihula]

ありがとうございます
localStorageを調べてみたいと思います