【サンプル付き】Local Storageとは？使い方を詳しく解説

目次を開く

検索するメニューを開く Category カテゴリーを開閉する Pickup

CSSショートハンドのチートシート

389
93475

CSSセレクタのチートシート｜37パターンを一覧で解説

3149
530629

IT・web用語の読み方わかるくん

0
323909

【2022年】人気ブラウザ11つを厳選！ランキング形式でご紹介

21
417500

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

27
14053

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

23
12671

Contact 広告・お仕事のご相談はこちらメニューを閉じる

目次を閉じる

124
Twitter
Facebook
Copy URL
hatena

html5から導入されたLocalStorage（ローカルストレージ）の使い方をサンプルアプリを用いて丁寧に説明していきます。

この記事を通して

LocalStorage（ローカルストレージ）とはなにか
LocalStorage（ローカルストレージ）の基本的な使い方
サンプルアプリで実際の使い方

をしっかりと理解することができます。

LocalStorage（ローカルストレージ）とは

ローカルストレージで何ができるかわかった上で、そもそもローカルストレージ(LocalStorage)とは何か？に触れていきましょう。

前述したようにローカルストレージ(LocalStorage)とはjavascript利用することでユーザーのデータをwebブラウザ(ローカル環境)に保存することができる仕組みです。他にはwebstoroageなんて呼び方もあります。

ローカルストレージ(LocalStorage)を用いたデータの保存・取得・削除はとても簡単で、keyとvalueでデータを紐付けてデータを操作します。

LocalStorage（ローカルストレージ）って何ができるの？

ローカルストレージを使う最も大きなメリットはデータベースとの連携が必要ないということです。

ユーザーの行動（どのページを見ただとか、どの商品にお気に入りボタンを押したなど）データをブラウザに保存することができるため、サーバーサイドについて詳しくない方でもjqueryがある程度できれば使用することができます。

Amazonでも、閲覧した商品のデータをLocalStorageへ保存し、次回アクセス時に【最近閲覧した商品】として表示しています。

他の利用例としては

お気に入りボタンを付けた商品の一覧ページをつくれる
メモ機能をつくることができる

などがあります。

「ユーザーごとのデータを保存して再利用したいけど、ログイン機能をつけるほどでもないんだよな」という時にローカルストレージは活躍します。ユーザーごとの情報を識別するのが「ブラウザ」なので、ログインをしてユーザーごとのデータを扱うという手間が発生しません。

事実、ログインをするということはユーザーにとって手間でしかないため、ないならない方がユーザーにとっても都合がよいのです。

Cookie（クッキー）とLocalstorage（ローカルストレージ）は何が違うのか

よく比較されるのが同じような機能を持つクッキー(Cookie)です。結果的にできることはほぼ同じですが、保存できるデータ容量や保存期間、通信の回数などやはりローカルストレージに軍配があがります。特別な理由がなければローカルストレージ(localstorage)が使うことをオススメします。

保存期間データ容量通信LocalStorage半永久5MBytesなしCookie有り(ブラウザ側の有効期限の設定による)4KBytesリクエストの都度発生する

ローカルストレージ対応ブラウザバージョン

ブラウザバージョンChromever8〜Firefoxver3.6〜Internet Explorerver8〜Safariver5〜Operaver11〜

ブラウザの対応対応範囲を確認できたら、ローカルストレージ(LocalStorage)の使い方を見ていきましょう。

Localstorage（ローカルストレージ）の使い方

ローカルストレージの利用方法は非常にシンプルです。

操作を分類すると

保存
取得
削除
初期化

と4つにわけることができそれぞれの操作につき1つの関数が用意されています。各操作の関数は以下です。

Localstorage（ローカルストレージ）へのデータの保存

関数を使う方法と、オブジェクトのプロパティとして保存する方法があります。

//その１：関数を使うパターン localStorage.setItem('Key', '保存する値'); //その2：オブジェクトのプロパティとして保存するパターン localStorage.saveKey = '保存する値'; Localstorage（ローカルストレージ）からデータの取得

保存した値を取りだします。こちらも保存同様2パターンあります。

//その1：関するを使うパターン var value = localStorage.getItem('Key'); //その2：オブジェクトのプロパティを取得するパターン var value = localStorage.saveKey; Localstorage（ローカルストレージ）への複数データの保存

複数のデータを保存したい場合はJSON形式のデータとして保存します。

注意したいのが複数の値（配列）を保存した場合は、JSON文字列に変換する必要があるということです。

JSON.stringify(obj)を使いJSON文字列へ変換してからローカルストレージへ保存しましょう。

var obj = { last : tarou, first : yamada }; var obj = JSON.stringify(obj); localStorage.setItem('Key', obj); Localstorage（ローカルストレージ）への複数データの取得

保存した値がJSON形式なのでもちろん取得する値はJSON形式で返ってきます。このままではjavascriptで扱えないので、取得したJSON形式のデータをJSON.parse(obj)を使いjavascriptのオブジェクトへ変換します

var jsonObj = localStorage.getItem('Key'); var jsObj = JSON.parse(jsonObj); console.log(jsObj); /* obj = { last : tarou, first : yamada }; */ Localstorage（ローカルストレージ）からデータの削除

削除はキーを指定するだけでキーに紐付いた値がローカルストレージ上から削除されます。

localStorage.removeItem('Key'); Localstorage（ローカルストレージ）を初期化する

まとめてデータを削除したい場合は「localStorage.clear()」が便利です。この一行でローカルストレージに保存されているすべ

てのデータを削除することができます。

localStorage.clear();

Localstorage（ローカルストレージ）の使い方サンプル

このサンプルはjQueryを使用しています

基本的な使い方を理解したところで、実際にローカルストレージを使用したサンプルを見てみましょう。

「タイトル」と「本文」を入力して「追加」を押すことでローカルストレージに内容が保存されます。
「追加」をするとページを更新してもそのメモが残り続けます。
「リセット」を押すことで全てのメモを削除できます。

追加リセット <div class="memoApp"> <div class="memoForm"> <input type="text" id="title" class="form-control" placeholder="タイトル" /> <textarea class="form-control" rows="3" placeholder="本文" id="body"></textarea> <button type="button" class="btn btn-primary btn-block" id="btnAdd">追加</button> </div> <div id="memoArea"> </div> <button type="button" class="btn btn-primary btn-block" id="btnReset">リセット</button> </div> .memoApp{ max-width: 375px; margin:0 auto 20px; } .memoApp input, .memoApp textarea, .memoApp button{ margin-bottom: 10px; } $(document).ready(function(){ var saveStorage = function(key,val){ localStorage.setItem(key, JSON.stringify(val)); }; var getStorage = function(key){ var obj = localStorage.getItem(key); return JSON.parse(obj); }; var add = function(){ var ttl = $(".memoForm #title").val(); bdy = $(".memoForm #body").val(); addMemo(ttl,bdy); saveMemo(ttl,bdy); }; var addMemo = function(ttl,bdy){ var template = '<input type="text" id="title" class="form-control" readonly="readonly" value="%s"/>' + '<textarea class="form-control" rows="3" id="body" readonly="readonly">%s</textarea>'; template = template.replace('%s',ttl).replace('%s',bdy); $("#memoArea").append(template); $(".memoForm #title").val(''); $(".memoForm #body").val(''); } memoArr = []; var storageKey = 'memoObj'; var saveMemo = function(ttl,bdy){ var memoObj = { ttl : ttl, bdy : bdy }; memoArr.push(memoObj); saveStorage(storageKey,memoArr); } var resetMemo = function(){ $("#memoArea").children().remove(); window.localStorage.clear(); } var readMemo = function(){ var memoObjs = getStorage(storageKey); if (memoObjs.length == null) return; for (var i = 0; i < memoObjs.length; i ++) { var memoObj = memoObjs[i]; var ttl = memoObj.ttl; var bdy = memoObj.bdy; var memoObj = { ttl : ttl, bdy : bdy }; memoArr.push(memoObj); saveStorage(storageKey,memoArr); addMemo(ttl,bdy); } }; //ページ読込み時にメモ復帰 readMemo(); //イベントハンドル $("#btnAdd").on('click',function(){ add(); }); $("#btnReset").on('click',function(){ resetMemo(); }); });

以上Localstorage（ローカルストレージ）の使い方の説明でした。

“WEB制作の勉強で失敗したくないあなたへ”

サイト制作をホントに0から学習できる教材を無料配布中！

＼モダンなポートフォリオサイトが作れるように！／

他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能！
ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

無料配布の講座では、このようにモダンなポートフォリオサイトが作れちゃいます！

特設ページで詳しくチェックする

評価数ランキング閲覧数ランキング

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

196
278202

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

182
660540

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

163
406999

<input>の使い方とtype属性の一覧をサンプル付きで紹...

154
382625

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

132
925875

すぐわかる！HTMLでスペースや空白を入れる正しい方法

48
1009745

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

132
925875

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

182
660540

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

129
608228

HTMLのtableでテーブルを作る方法と応用テクニックを解説

80
548591

新着記事一覧

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

41
11319

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

55
81980

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

131
56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

23
12671

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

27
14053

【ノンプログラマー必見】Conoha WingでWEBサイトを公開するま...

24
17194

フリーランスやWeb志望者の悩み・疑問に答えます！現役Web制作会社に全...

1
8893

ホームページ制作の相談が完全無料！？プロが5,000社から最適な1社を選...

0
22227

【保存版】Perfect Pixelを使ってピクセルパーフェクトを実現す...

84
62737

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！

121
367230

【完全ガイド版】Google Chromeのダウンロード方法と使い方

9
44285

【完全ガイド版】Sublime Textの使い方と設定方法 –...

44
142030

【2022年】人気ブラウザ11つを厳選！ランキング形式でご紹介

21
417500

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

55
81980

【2022年】日本と世界でのブラウザシェアをデスクトップ・スマホ別に紹介

5
6624

【日本語ガイド】Asanaの使い方のすべて。登録〜タスク管理まで解説

6
98065

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

41
11319

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック！

評価数ランキング閲覧数ランキング

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

196
278202

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

182
660540

HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

163
406999

<input>の使い方とtype属性の一覧をサンプル付きで紹...

154
382625

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

132
925875

すぐわかる！HTMLでスペースや空白を入れる正しい方法

48
1009745

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

132
925875

【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

182
660540

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

129
608228

HTMLのtableでテーブルを作る方法と応用テクニックを解説

80
548591

新着記事一覧

img関連で覚えたい、ワンランク上のコーダーになるための8つの知識

41
11319

【完全版】Figmaからコーディング！書き出し・CSSの各プロパティの値...

55
81980

FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理...

131
56753

【CSS Grid 実務編】よくあるレイアウト６つを実際のコードで解説｜...

23
12671

【CSS Grid 入門編】動画解説で手を動かしながら学ぶ！3つのサンプ...

27
14053

📎📎📎📎📎📎📎📎📎📎

BOT

【サンプル付き】Local Storageとは？使い方を詳しく解説

LocalStorage（ローカルストレージ）とは

LocalStorage（ローカルストレージ）って何ができるの？

Localstorage（ローカルストレージ）の使い方

Localstorage（ローカルストレージ）の使い方サンプル

サイト制作をホントに0から学習できる教材を無料配布中！

＼pick up articles／