114人がいいねしました
更新日
【サンプル付き】Local Storageとは?使い方を詳しく解説
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 | リクエストの 都度発生する |
ローカルストレージ対応ブラウザバージョン
ブラウザ | バージョン |
---|---|
Chrome | ver8〜 |
Firefox | ver3.6〜 |
Internet Explorer | ver8〜 |
Safari | ver5〜 |
Opera | ver11〜 |
ブラウザの対応対応範囲を確認できたら、ローカルストレージ(LocalStorage)の使い方を見ていきましょう。
Localstorage(ローカルストレージ)の使い方
ローカルストレージの利用方法は非常にシンプルです。
操作を分類すると
- 保存
- 取得
- 削除
- 初期化
と4つにわけることができそれぞれの操作につき1つの関数が用意されています。各操作の関数は以下です。
Localstorage(ローカルストレージ)へのデータの保存
関数を使う方法と、オブジェクトのプロパティとして保存する方法があります。
//その1:関数を使うパターン
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(ローカルストレージ)の使い方サンプル
基本的な使い方を理解したところで、実際にローカルストレージを使用したサンプルを見てみましょう。
- 「タイトル」と「本文」を入力して「追加」を押すことでローカルストレージに内容が保存されます。
- 「追加」をするとページを更新してもそのメモが残り続けます。
- 「リセット」を押すことで全てのメモを削除できます。
<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(ローカルストレージ)の使い方の説明でした。