美容・飲食広告代理店 ホームページ制作 株式会社エークラウド

BLOG ブログ

エークラウドメンバーによるローテーションブログ

2020.08.17

localStorage APIで遊んでみる

WEB制作 > WEBサービス・ツール

たかし システム / たかし

記事一覧を見る

突然ですが、今回は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>内を空にする
}

もっと効率の良い記述方法があるのかもしれないですが、僕の頭ではコレでいっぱいです。。

この他、ローカルストレージには配列を保存できたりできますが、注意点としては全部文字列になるということ。
数字を入れても取り出すときには勝手に文字列になってたりするのでこのあたりがちょっとめんどくさかったりします。

sample

この記事を書いた人

システム / たかし

WEB制作記事

localStorage APIで遊んでみる

2024.03.28

ありがとうUNITY

WEB制作 > デザイン

田中 レタッチャー / 田中

Read More

localStorage APIで遊んでみる

2024.02.06

2月になっちゃいましたが今年やりたいこと

WEB制作 > デザイン

S ディレクター / S

Read More

localStorage APIで遊んでみる

2024.01.29

北陸応援割

WEB制作 > デザイン

げん デザイナー / げん

Read More

localStorage APIで遊んでみる

2024.01.23

個性的な料理配信者たち 3選

WEB制作 > デザイン

かめ システム / かめ

Read More

localStorage APIで遊んでみる

2023.12.27

諫早ブリーズに誘われて

WEB制作 > デザイン

サクセス山口 デザイナー / サクセス山口

Read More

WEB制作カテゴリ記事一覧

全カテゴリ一覧

WEB制作 [116]

ライフ [469]

エンタメ [173]

エークラウド [25]

メンバー

お客様の思い描くビジョンを明確な形に変えていく為に
全力でサポートさせて頂きます。
お問い合わせ・ご相談はこちらまでお気軽にご連絡ください。

お問い合わせはこちら

  • お電話でのお問い合わせ :03-5784-3113
  • 受付時間 10:30-18:30(土日祝除く)

CONTACT

WEB制作のお問い合わせはこちらから。

PAGETOP