小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2024年 > 7月 > 5日

【お知らせ】JavaScriptで背景色の変更が出来るようになりました．

2024年07月05日

Logging

おはようございます．【お知らせ】JavaScriptで背景色の変更が出来るようになりました．リロードしても画面の状態を維持するようになっています．因みにこれ、IPアドレスとかいうモノをこちらで取得して判断している訳ではありません．

ユーザーのブラウザの中の保存領域（のが多いw）にカラー色を保存するようになっています．なので、同ブラウザで見るとご自身が選択したカラー色で表示されるようになってます．要するに2015年？あたりから、各ブラウザにデータを保存出来る機能が追加されました．その機能をJS（javascript）言語で呼び出して使用できるようになっているのです．

このメリットはプライバシーが担保出来るということです．ユーザー側でデータを保持しているので消す事も可能ですし、どんなデータを保存しているのかもブラウザの検証項目のアプリケーション、ローカルストレージと進めば確認することが可能です．

因みにソース・コードはこちらです．


if(localStorage.getItem('zcolor')){
    document.body.style.backgroundColor = localStorage.getItem('zcolor');
}
if(document.querySelectorAll('#zcolors > .zcolor')){
    [...document.querySelectorAll('#zcolors > .zcolor')].forEach(elm=>{
        elm.addEventListener('click',(e)=>{
            let color = elm.getAttribute('data-zcolor');
            localStorage.setItem('zcolor',color);
            document.body.style.backgroundColor = color;
        });
    });
}

明日へ続く．

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2024年07月05 06:00日

タグ

body.style.backgroundColor, color, data-zcolor&#39, document.querySelectorAll, elm, elm.addEventListener, elm.getAttribute, foreach, gt, if, javascript, JS, let color, localStorage, localStorage.getItem, zcolors, アプリケーション, ローカルストレージ, 担保,