BLOG ブログ
エークラウドメンバーによるローテーションブログ
2020.08.17
localStorage APIで遊んでみる
突然ですが、今回はlocalStorage APIで遊んでみます。
最近JavaScriptをほぼ触っていないので、復習の意味も含めて色々いじってみます。
ちなみにこのローカルストレージとは、クッキーの強化版と思ってもらって大丈夫です。
あ、cookie(クッキー)です、お菓子じゃないほうの。
クッキーと言えば、パスやアカウントをいちいち毎回打たなくてもいいように自動入力、もしくは自動ログインしてくれるあの便利機能。
クロームでは"デベロッパーツール"からApplication項目→Storage項目の中にlocalStorageという項目があるのでそこで中身を確認できます。
このメモ帳は即座に製作可能です。
まずは、お手元のテキストエディット等に以下のコードをコピペしてみましょう。
そのファイルに適当な名前を付けて拡張子を.HTMlにして保存。
あとはそのまま保存したファイルをブラウザで立ち上げます。
<html>
<head>
<title>JavaScriptでメモ帳を方法</title>
<style type="text/css">
textarea{width:100%;height:30%;}
</style>
</head>
<body>
<h1>書いたものを保存、読み込みできるメモです。</h1>
<form name="form1">
<textarea name="Memo"></textarea>
</form>
<p>
<input type="button" value="保存" onclick=save(); ></input>
<input type="button" value="読込" onclick=load(); ></input>
<div id="memo"></div>
</p>
<script type="text/javascript">
// 読込
function load() {
var MemoData = "";//空箱作成
if(!localStorage.getItem('MemoDataBox')) {//もしMemoDataが空のとき・・・
MemoData = "メモは登録されていません。";
} else {//でなければ・・・
MemoData = localStorage.getItem('MemoDataBox');//ローカルストレージからMemoDataを取り出し
}
document.form1.Memo.value = MemoData;//form1にMemoDataを出力
}
// 保存
function save() {
var MemoData = document.form1.Memo.value;//MemoDataにformの情報を格納
localStorage.setItem('MemoDataBox', MemoData);//ローカルストレージにMemoDataを格納
var elements = document.getElementsByClassName(memo);
elements.innerHTML = MemoData;
}
</script>
</body>
</html>
上はシンプルなメモ機能のページです。
実際に記録されているかどうかは先程説明したクロームの"デベロッパーツール"で確認できます。
次にカスタマイズしてみます。
Body内にID名memoのdivタグがあるかと思います。
中身は何もない状態。
では、保存ボタンを押したときにタグ内にローカルストレージの情報を出力するようにしてみましょう。
タイミングは保存ボタンを押したときです。
なので、function save()内にコードを入れていきます。
以下のコードをコピペ。
var elements = document. getElementById('memo');//ID"memo"を探してelementsに格納
elements.innerHTML = '<p>' + MemoData + '</p>';//elementsをMemoData書き換えて出力
次にStorage内の情報を消去してみます。
Pタグ内に以下の消去ボタンを設置。
<input type="button" value="消去" onclick=Delete(); ></input>
次にjavascriptコード内に消去用のfunction(関数)を設置します。
// 消去
function Delete() {
localStorage.clear();//これでローカルストレージ全消去
MemoData = "メモを削除しました";
document.form1.Memo.value = MemoData;//form1にMemoDataを出力
var elements = document. getElementById('memo');
elements.innerHTML = '';//<div id="memo">~</div>内を空にする
}
もっと効率の良い記述方法があるのかもしれないですが、僕の頭ではコレでいっぱいです。。
この他、ローカルストレージには配列を保存できたりできますが、注意点としては全部文字列になるということ。
数字を入れても取り出すときには勝手に文字列になってたりするのでこのあたりがちょっとめんどくさかったりします。
WEB制作記事
全カテゴリ一覧
WEB制作 [116]
ライフ [469]
エンタメ [173]
エークラウド [25]
メンバー
- すい[1]
- べっちゃん[1]
- アダム[1]
- かにかま次郎[1]
- 助[1]
- momo[1]
- ひき肉[1]
- ポテト[1]
- げん[1]
- おもち[2]
- かっぱ[1]
- 南千住[1]
- 東横イン[1]
- T・ヨシザウルス・ムンチャクッパス[2]
- コンバット越後[2]
- てらしー[2]
- スリクス[2]
- K.K[1]
- 脳筋桜ヶ丘[2]
- 5億[2]
- あく美[2]
- みずがめ座(仮)[2]
- ゆずこしょう[3]
- ゆめぴりか[2]
- ででざむらい[2]
- びた 一文[2]
- ももたろう[2]
- べ[2]
- ぶよ[3]
- つむ[2]
- みのもん[1]
- 戌[2]
- くまごりら[2]
- かわ[2]
- すもも[3]
- くしゃ美[3]
- たくを[2]
- まめ[3]
- mob[4]
- セメントボーイ[1]
- ラー油[3]
- なお[4]
- 藤[4]
- しなちく[4]
- tori[4]
- いまいち[4]
- 髭もじゃ[4]
- てぃな[4]
- さとし[4]
- onsbr[5]
- うが[7]
- jajamaru[4]
- エノキ[3]
- アット[5]
- D[4]
- さと[3]
- かんきつ[2]
- key[3]
- カク[4]
- あおき[3]
- みー[4]
- ゆき[4]
- popuko[5]
- サトウ[5]
- S@[6]
- かつぞう[6]
- おじょ~[5]
- ごんごん[6]
- ペン蔵[5]
- さすけ[5]
- 12月[1]
- ドラ[2]
- 桃太郎[6]
- うしろ[4]
- 漬物[3]
- sensen[3]
- ハウス[6]
- おしお[6]
- かっちゃん[8]
- あっちゃん[6]
- なっさん[6]
- いちこ[5]
- 黒い人[5]
- みたらし団子パンチ[11]
- おぎや[11]
- アラーキー[6]
- S[7]
- でらまる[8]
- たかし[10]
- 川崎[8]
- シャバ恵[17]
- 田中[13]
- かめ[8]
- おおおま[17]
- たかゆき[10]
- ひゃく[6]
- ぺん[16]
- ばしこ[7]
- パンダ[3]
- つぽ[13]
- あいかわ[8]
- あちゃみ[8]
- まえだまえだ[18]
- のじ[12]
- muuran[22]
- ケージ[17]
- ねこまんま[8]
- わか[13]
- たみお[17]
- マル[18]
- ロキン[7]
- あーちゃん[8]
- きん にくお[10]
- KAGEKI[26]
- 先生[9]
- 窓際主任[7]
- トゴ[26]
- よね[8]
- あさ[10]
- どめ[14]
- まお次郎[9]
- めめんともり[6]
- サクセス山口[20]
- ドリー[15]
- ピザリンゴ[8]
- ナカム[12]
- くりすとふぁー[15]
お客様の思い描くビジョンを明確な形に変えていく為に
全力でサポートさせて頂きます。
お問い合わせ・ご相談はこちらまでお気軽にご連絡ください。
- お電話でのお問い合わせ :03-5784-3113
- 受付時間 10:30-18:30(土日祝除く)