前回の続き(スマホ用サイトに適した文字の大きさとは？文章の文字サイズをJavaScriptとCSSで変えるの記事)で、
任意に選択した文字サイズを維持したままページ遷移させるには、HTML5での新仕様のwebストレージに情報を記憶させる事で可能にする。
webストレージとはユーザーのブラウザに情報を記憶する機能である。それはhtml等の各種ファイルが保存されているホストコンピュータのサーバー側のサーバーサイドでなくフロントエンドのクライアントサイドであるユーザーの使用するブラウザで機能する。JSON形式の連想配列で格納されJavaScriptで一連の操作が行われる。セキュリティは高くないので重要な保存は行わない方が良い。
webストレージには二種類あり、サイトを閉じるまでの間だけストレージが実行され続け情報を保存するsessionStorageと、サイトを閉じた後も消去しない限りは永続して情報が保存されるlocalStorageがある。それらは保存の期間とJavaScript内でのストレージの宣言時の名称が主に違うだけで使い方は同じである。
以下の使用例として前回のクリックしたら文字サイズを変えるボタンのスクリプトで、コメントアウトの宣言の行でストレージの使用開始を宣言し変数に格納する。ここは永続して保存させたいならばlocalStorageに置き換えても良い。
コメントアウトのセットの行でJSONの連想配列形式で保存させる鍵(キー)名と情報をsetItem関数でセットする。
コメントアウトのゲットの以下if文の中の条件判定でgetItem関数に引き出したい保存情報の鍵(キー)名を引数にしその戻り値を使用している。
(JavaScript)
<script>
var s = document.getElementById('fontS');
var m = document.getElementById('fontM');
var l = document.getElementById('fontL');
var z = document.getElementsByTagName('p');
var x = z.length;
var storage = sessionStorage; // 宣言
s.onclick = function() {
for(var i=0;i
}
storage.setItem('key','s'); // セット
}
m.onclick = function() {
for(var i=0;i
}
storage.setItem('key','m'); // セット
}
l.onclick = function() {
for(var i=0;i
}
storage.setItem('key','l'); // セット
}
// ゲット
if(storage.getItem('key') == 's') {
for(var i=0;i
}
} else if(storage.getItem('key') == 'm') {
for(var i=0;i
}
} else if(storage.getItem('key') == 'l') {
for(var i=0;i
}
}
</script>
ここでは使用してないが.setItem('キー名','値')や.setItem('キー名','値')の様に.removeItem('キー名')でストレージから削除出来て、.clear()で全削除出来る。なお.key(n)でn番目のキーの値を得る事が出来るがOSかブラウザかの仕様の違いで環境次第では保存した順序通りには返してくれない(key(n)では不規則な順序だったりnullやわけのわからない数字の文字列を返されたので、json.parse()で文字列を解析してobject.key()で列挙可能な返り値を求めたりNumber()で無理矢理キーに設定した文字列の数字を数値に変えたりしたら何とかなった事があるが)。