LocalStorage
from https://webliker.info/how-to-use-localstrage/
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（ローカルストレージ）へのデータの保存
関数を使う方法と、オブジェクトのプロパティとして保存する方法があります。
js//その１：関数を使うパターン
localStorage.setItem('Key', '保存する値');
//その2：オブジェクトのプロパティとして保存するパターン
localStorage.saveKey = '保存する値';Localstorage（ローカルストレージ）からデータの取得
保存した値を取りだします。こちらも保存同様2パターンあります。
js//その1：関するを使うパターン
var value = localStorage.getItem('Key');
//その2：オブジェクトのプロパティを取得するパターン
var value = localStorage.saveKey;Localstorage（ローカルストレージ）への複数データの保存
複数のデータを保存したい場合はJSON形式のデータとして保存します。
注意したいのが複数の値（配列）を保存した場合は、JSON文字列に変換する必要があるということです。
JSON.stringify(obj)を使いJSON文字列へ変換してからローカルストレージへ保存しましょう。
jsvar obj = {
last : tarou,
first : yamada
};
var obj = JSON.stringify(obj);
localStorage.setItem('Key', obj);Localstorage（ローカルストレージ）への複数データの取得
保存した値がJSON形式なのでもちろん取得する値はJSON形式で返ってきます。このままではjavascriptで扱えないので、取得 したJSON形式のデータをJSON.parse(obj)を使いjavascriptのオブジェクトへ変換します
jsvar jsonObj = localStorage.getItem('Key');
var jsObj = JSON.parse(jsonObj);
console.log(jsObj);
/*
obj = {
last : tarou,
first : yamada
};
*/Localstorage（ローカルストレージ）からデータの削除
削除はキーを指定するだけでキーに紐付いた値がローカルストレージ上から削除されます。
jslocalStorage.removeItem('Key');Localstorage（ローカルストレージ）を初期化する
まとめてデータを削除したい場合は「localStorage.clear()」が便利です。この一行でローカルストレージに保存されているすべ
てのデータを削除することができます。
jslocalStorage.clear();Localstorage（ローカルストレージ）の使い方サンプル
基本的な使い方を理解したところで、実際にローカルストレージを使用したサンプルを見てみましょう。
01_「タイトル」と「本文」を入力して「追加」を押すことでローカルストレージに内容が保存されます。
02_「追加」をするとページを更新してもそのメモが残り続けます。
03_「リセット」を押すことで全てのメモを削除できます。
HTML
html<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>CSS
css.memoApp{max-width: 375px;margin:0 auto 20px;}
.memoApp input,.memoApp textarea,.memoApp button{margin-bottom: 10px;}JavaScript
js$(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（ローカルストレージ）の使い方の説明でした。
Chrome > F12 > Application > Storage > Local Storage
留言
張貼留言