HTML5のcontenteditable属性でコンテンツを編集→localStorageを使用して保存、の流れをjQueryで出来るようにする。BooksホームWebデザインjQueryHTML5のcontenteditable属性でコンテンツを編集→localStorageを使用して保存、の流れをjQueryで出来るようにする。目次contenteditableとlocalStorageSamplecontenteditableのサンプルです!編集出来ます!マークアップHTML5とlocalStorageこの流れがjQueryで簡単にたまたま勉強中だった時に見かけたTips。HTML5には、IEで採用されていたcontenteditable属性が追加され、ページ内を編集することが出来ます。localStorageを使って編集状態を保存できるんですが、この処理的なものをjQueryで行う、みたいな方法です。僕自身はまだ使う機会は無さそうなんですが、ちょっと面白かったのでメモ的に。技術的な話はリファレンスでご確認下さい。contenteditableとlocalStorageまず、contenteditableとlocalStorageに関してどういうものか、なんですが、僕も大して理解してないんですけど、大雑把に言うと、ユーザーが閲覧中のページを編集、保存できる、というもの。contenteditableはIEですでに実装されていた属性なのでHTML5で新たに追加、というものではありません。localStorageはCookieとは異なります。[note]比較してくれている記事が凄く参考になりました→LocalStorageがおもいのほか便利すぎたのでまとめ[/note]馴染みはないマークアップだと思いますし、触ったほうが分かりやすいですね。Samplecontenteditableのサンプルです!編集出来ます!クリックしてみてください。バックスペースが表示されると思いますのでテキストを削除、編集可能です。編集後にリロードすると編集前に戻ってしまいます。これでは意味がありませんので、localStorageを使って編集状態を保存出来るようにしなければなりません。対応ブラウザはChrome以外は確認していません。