HTML5のCanvasを用いて、絵を描くWebアプリケーションを前に作りました。 そのお絵描きWebアプリケーションに、HTML5のLocalStorageを利用した 一時保存機能を追加しました。 今回はその実現方法をブログに残しておきたいと思います。 http://www.yoheim.net/labo/html5/canvas/freeHandWrite2.html Canvasの内容をLocalStorageに保存する Canvasでは、内容をbase64エンコーディングすることで、文字列をして取得出来ます。 それで取得した文字列をLocalStorageに保存する。 // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas
ちょっとハマったのでメモを残します。 今作っているアプリで、ローカルストレージにデータを保存できたらいいのかなと思って調べていたら、AngularJS側で使いやすいようにモジュール化されたのがありました。 AngularLocalStorage その使い方の記事 AngularJS の localStorage モジュール angularLocalStorage これでよさそうなのかなと思ったのですが、いまいち使い方がわからなかったので、試行錯誤していたところ、記事を書いていた本人に声をかけていただいて、疑問が解決したので、メモっておきます。 var yourApp = angular.module('yourApp', [..., 'angularLocalStorage'] yourApp.controller('yourController', function($scope, st
HTML5のlocalStorageの使い方のまとめです。 ここではlocalStorageを使った文字列の保存・取得方法に加え、オブジェクトのデータの保存・取得方法についても説明します。 記事の最後にサンプルも掲載しています。 1.localStorageとは localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、ブラウザを閉じてもlocalStorageのデータは保存されます。 データは、キーと値の組み合わせで保存されます。 localStorageはwindowsオブジェクトのプロパティなので、正しくは「window.localStorage」ですが、「window.」は省略して実装することができます。 2.localStorageにデータを設定する localStorageにデータを設定するには、setItem()を利用します。 localS
この記事を書いてから既に5年以上経っているのですが今年になってもいいねをいただく事があるので、注意喚起のため更新します。 詳細は以下の記事を参照いただけると。 HTML5のLocal Storageを使ってはいけない(翻訳) https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851 // localStorageが使用出来るかチェック if (!window.localStorage) { alert("お使いのブラウザはlocalstorageに対応してません。"); } // localStorageに値を保存 function setItem(key, val) { window.localStorage.setItem(key, val); } // localStorageから値を取得 function getItem(key)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く