ブログを勝手に書き換えてみよう。
今回のブログの本文は誰でも編集可能です。テキストをクリックして適当に編集したあとに保存ボタンを押せば、つぎにアクセスした際も編集後の文章が表示されます。
結果はブラウザごとに保存され、別のブラウザで観覧した場合はオリジナルの文章が表示されます。
※ Google Chromeでしか動作を確認していません。
※ プライベートモードではおそらくうまく動作しません。
動作原理
本文全体をcontenteditable=trueのDIV要素で囲み、DIV要素のinnerHTMLをローカルストレージに保存しています。
(なので最大5MBまで保存できるはずです)
初期化ボタンを押すと、ローカルストレージ内の該当箇所が削除されるのでもともとの文章が表示されるようになります。
- 保存
- 初期化