

Webアプリを作成しています。0から始めて間もないので、優しく教えていただけたら嬉しいです。(せめてヒントだけでもお願いしたいです。)

HTMLで作成したボタンを押すとJavaScriptで動的にクラスを変更し背景色が変わるようなプログラムを作成しました。  
これをローカルファイル内で作成した別のHTMLへ移動しても背景色を保存できるようにしたいと思っています。現在考えている方法としてはLocalStoregeの使用を考えています。

以下、コードです。

[code]

    const backcols = [
      '#bcolorblue',
      '#bcolorred',
      '#bcolorlightblue',
      '#bcolorbrown',
      '#bcolorwhite',
      '#bcolorblack'
    ];
    
    const backclass = [
      'bbl',
      'bre',
      'bli',
      'bbr',
      'bwh',
      'bbla'
    ]
    
    const colors = [
      '#colorblue',
      '#colorred',
      '#colorlightblue',
      '#colorbrown',
      '#colorwhite',
      '#colorblack'
    ]
    
    const colorclass = [
      'clbl',
      'clre',
      'clli',
      'clbr',
      'clwh',
      'clbla'
    ]
    
    const coltabs =[
      'blue',
      'red',
      'lightblue',
      'brown',
      'white',
      'black'
    ]
    
    /*背景色*/
    
    var coltab = "black";
    var bcoltab = "white";
    
    $(backcols[0]).click(function(){
      if(coltab == coltabs[0]){
        alert('文字色と同色になってしまいます。')
      } else {
      document.getElementById("new1").className=backclass[0];
      bcoltab = coltabs[0];
      }
    });
    
    $(backcols[1]).click(function(){
      if(coltab == coltabs[1]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[1];
      bcoltab = coltabs[1];
      }
    });
    
    $(backcols[2]).click(function(){
      if(coltab == coltabs[2]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[2];
      bcoltab = coltabs[2];
       }
    });
    
    $(backcols[3]).click(function(){
      if(coltab == coltabs[3]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[3];
      bcoltab = coltabs[3];
       }
    });
    
    $(backcols[4]).click(function(){
      if(coltab == coltabs[4]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[4];
      bcoltab = coltabs[4];
       }
    });
    
    $(backcols[5]).click(function(){
      if(coltab == coltabs[5]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[5];
      bcoltab = coltabs[5];
       }
    });
    
    /*文字色:*/
    
    $(colors[0]).click(function(){
      if(bcoltab == coltabs[0]){
        alert('背景色と同色になってしまいます。')
       } else {
      document.getElementById("colorid").className=colorclass[0];
      coltab = coltabs[0];
       }
    });
    
    $(colors[1]).click(function(){
      if(bcoltab == coltabs[1]){
        alert('背景色と同色になってしまいます。')
       } else {
      document.getElementById("colorid").className=colorclass[1];
      coltab = coltabs[1];
       }
    });
    
    $(colors[2]).click(function(){
      if(bcoltab == coltabs[2]){
        alert('背景色と同色になってしまいます。')
       } else {
      document.getElementById("colorid").className=colorclass[2];
      coltab = coltabs[2];
       }
    });
    
    $(colors[3]).click(function(){
      if(bcoltab == coltabs[3]){
        alert('背景色と同色になってしまいます。')
       } else {
      document.getElementById("colorid").className=colorclass[3];
      coltab = coltabs[3];
       }
    });
    
    $(colors[4]).click(function(){
      if(bcoltab == coltabs[4]){
        alert('背景色と同色になってしまいます。')
       } else {
      document.getElementById("colorid").className=colorclass[4];
      coltab = coltabs[4];
       }
    });
    
    $(colors[5]).click(function(){
      if(bcoltab == coltabs[5]){
        alert('背景色と同色になってしまいます。')
       } else {
      document.getElementById("colorid").className=colorclass[5];
      coltab = coltabs[5];
       }
    });
[/code]

[code]

    /*背景色の変更*/
    
    .bbl{
      background-color: blue;
    }
    
    .bre{
      background-color: red;
    }
    
    .bli{
      background-color: lightblue;
    }
    
    .bbr{
      background-color: brown;
    }
    
    .bwh{
      background-color: white;
    }
    
    .bbla{
      background-color: black;
    }
    
    .clbl{
      color: blue;
      text-align: center;
    }
    
    /*文字色の変更*/
    
    .clre{
      color: red;
      text-align: center;
    }
    
    .clli{
      color: lightblue;
      text-align: center;
    }
    
    .clbr{
      color: brown;
      text-align: center;
    }
    
    .clwh{
      color: white;
      text-align: center;
    }
    
    .clbla{
      color: black;
      text-align: center;
    }
[/code]

[code]

    <body id="new1">
      <div id="colorid" class="page">
        <div id="sizeid" class="size">
    
        <h1>色の変更</h1>
      
      <p>背景色</p><br>
    
      <input id="bcolorblue" type="button" value="青色">
      <input id="bcolorred" type="button" value="赤色">
      <input id="bcolorlightblue" type="button" value="水色">
      <input id="bcolorbrown" type="button" value="茶色">
      <input id="bcolorwhite" type="button" value="白色">
      <input id="bcolorblack" type="button" value="黒色">
    
      <p>文字色</p><br>
            
      <input id="colorblue" type="button" value="青色">
      <input id="colorred" type="button" value="赤色">
      <input id="colorlightblue" type="button" value="水色">
      <input id="colorbrown" type="button" value="茶色">
      <input id="colorwhite" type="button" value="白色">
      <input id="colorblack" type="button" value="黒色">
    
      <a href="setting.html">戻る</a>
      
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script src="script.js"></script>
    
        </div>
      </div>
    </body>
[/code]


CC BY-SA 4.0
2020-10-08T02:04:10.097
71006
2020-10-08T06:30:27.060
2020-10-08T02:12:10.587
3060
42231
question
javascript html css
JavaScript と LocalStorege を使用して背景色をサイト内で共有したい


試行錯誤していたらなんとかできました。アドバイスをくださった方、ありがとうございます。  
きれいではないかもしれませんが一応完成はしたので、これから整えられたらと思います。

ありがとうございました。

[code]

    const backcols = [
      '#bcolorblue',
      '#bcolorred',
      '#bcolorlightblue',
      '#bcolorbrown',
      '#bcolorwhite',
      '#bcolorblack'
    ];
    
    const backclass = [
      'bbl',
      'bre',
      'bli',
      'bbr',
      'bwh',
      'bbla'
    ]
    const coltabs =[
      'blue',
      'red',
      'lightblue',
      'brown',
      'white',
      'black'
    ]
    
    /*背景色*/
    
    var coltab = "black";
    var bcoltab = "white";
    
    $(backcols[0]).click(function(){
      if(coltab == coltabs[0]){
        alert('文字色と同色になってしまいます。')
      } else {
      document.getElementById("new1").className=backclass[0];
      bcoltab = coltabs[0];
      }
    });
    
    $(backcols[1]).click(function(){
      if(coltab == coltabs[1]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[1];
      bcoltab = coltabs[1];
      }
    });
    
    $(backcols[2]).click(function(){
      if(coltab == coltabs[2]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[2];
      bcoltab = coltabs[2];
       }
    });
    
    $(backcols[3]).click(function(){
      if(coltab == coltabs[3]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[3];
      bcoltab = coltabs[3];
       }
    });
    
    $(backcols[4]).click(function(){
      if(coltab == coltabs[4]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[4];
      bcoltab = coltabs[4];
       }
    });
    
    $(backcols[5]).click(function(){
      if(coltab == coltabs[5]){
        alert('文字色と同色になってしまいます。')
       } else {
      document.getElementById("new1").className=backclass[5];
      bcoltab = coltabs[5];
       }
    });
    
    window.onload = function() {
      var bkyes = localStorage.getItem('colkye');
    
      if (bkyes == coltabs[0]){
    document.getElementById("new1").className=backclass[0];
      } else if (bkyes == coltabs[1]) {
    document.getElementById("new1").className=backclass[1];
      } else if (bkyes == coltabs[2]) {
    document.getElementById("new1").className=backclass[2];
      } else if (bkyes == coltabs[3]) {
    document.getElementById("new1").className=backclass[3];
      } else if (bkyes == coltabs[4]) {
    document.getElementById("new1").className=backclass[4];
      } else if (bkyes == coltabs[5]) {
    document.getElementById("new1").className=backclass[5];
      }
[/code]

[code]

    /*背景色の変更*/
    
    .bbl{
      background-color: blue;
    }
    
    .bre{
      background-color: red;
    }
    
    .bli{
      background-color: lightblue;
    }
    
    .bbr{
      background-color: brown;
    }
    
    .bwh{
      background-color: white;
    }
    
    .bbla{
      background-color: black;
    }
    
    .clbl{
      color: blue;
      text-align: center;
    }
[/code]

[code]

    <body id="new1">
      <div id="colorid" class="page">
        <div id="sizeid" class="size">
          <div id="boldid" class="bold">
    
        <h1>色の変更</h1>
      
      <p>背景色</p><br>
    
      <input id="bcolorblue" type="button" value="青色">
      <input id="bcolorred" type="button" value="赤色">
      <input id="bcolorlightblue" type="button" value="水色">
      <input id="bcolorbrown" type="button" value="茶色">
      <input id="bcolorwhite" type="button" value="白色">
      <input id="bcolorblack" type="button" value="黒色">
    
      <a href="setting.html">戻る</a>
      
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script src="script.js"></script>
          </div>
        </div>
      </div>
    </body>
[/code]


CC BY-SA 4.0
2020-10-08T06:30:27.060
71013
2020-10-08T06:30:27.060
42231
71006
answer