JSでCSSの変数を保存する（LocalStorage）

　閉じたとき、更新したときなどアンロードされたら保存する。

成果物

• DEMO
• github

前回まで

• CSSのカスタムプロパティをJSで操作する。
• JSでCSSの変数をセットする（CustomProperty）

情報源

• localStorage

localStorage.getItem(キー);
localStorage.setItem(キー, 値);

コード抜粋

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('#line-of-chars-label').innerHTML = localStorage.getItem('line-of-chars');
});

window.addEventListener('beforeunload', (event) => {
    localStorage.setItem('line-of-chars', document.querySelector('#line-of-chars').value);
});

:root {
    --line-of-chars:40;
}
body {
    font-size: calc(100vw / (var(--line-of-chars)));
}

<input type="range" id="line-of-chars" name="line-of-chars" value="40" min="10" max="50">
<label for="line-of-chars"><span id="line-of-chars-label"></span>字／行</label>
<p>１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０</p>

保存するタイミング

　なぜ変更されたときに保存せず、終了や更新などアンロードされたときに保存するのか。それは不要な保存を避けることでディスクの寿命を延ばすためである。実際、変更されるたびに保存する必要はない。終了したり更新されなければ現在のメモリに存在するからだ。よって必要最小限の保存タイミングはアンロード時が最適である。

所感

　IndexedDBより簡単に使えるため、小規模ならLocalStorageを使いたい。変数の規模が増えてきたら乗り換えることになるだろう。

　そもそもCSS変数でデフォルト値を最適にできたら保存せずに済む。けれど最適値は人やデバイスによっても違うので概算値をCSSに書いておくことくらいしかできない。結局、個々人で細かく調整し、それを永続的に使いたいならデバイスごとに保存する必要がある。

対象環境

• 2021-12-29
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.51-v7l+ #1333 SMP Mon Aug 10 16:51:40 BST 2020 armv7l GNU/Linux