如何从另一个页面更改页面上 div 的颜色

Question

Since I'm still learning the localStorage and cookie techniques, I am trying to change the color of the div on page1.html from page2.html by using the submit button, color of the div should be changed permanently when the user clicks submit button on page2.html
This is what I got on page1:

window.onload = function() {
    var anchors = document.getElementsByClassName("circleBase type1");
    for(var i = 0; i < anchors.length; i++) {
        anchors[i].onclick = function() {
            window.open("EnterInformation.html");
        }
    }
}

on page2 i used localStorage for saving data permanently, with this save I need to change the color of the div on page1. This is page2 so far:

 function SaveInfo() {
        localStorage.Yritys = $('#Yritys').val();
        localStorage.Henkilönimi = $('#Henkilönimi').val();
        localStorage.Asema_yrityksessa = $('#Asema_yrityksessa').val();
        localStorage.Puhelin_Nr = $("#Puhelin_Nr").val();
        localStorage.e_Mail = $('#e_Mail').val();
        localStorage.Keskustelun_aihe = $('#Keskustelun_aihe').val();

What would be the solution to this? It would be nice to use localStorage instead of cookies. Thank You!

Answer 1

You can create a local storage

myCustomColor = '#2B2A28';
localStorage.setItem('myDataStorage', myCustomColor);

Then retrieve them

var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('myDiv').style.backgroundColor = myLoadedColor;

myDataStorage is the name of your created localStorage. You can use different names to create multiple localStorages if you would.

You can .getItem on the localStorage upon page load and then set the color of your div based on that localStorage data.

Answer 2

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

This little piece of code scans your page for all elements with the matching class and changes the background color then. Of course you can use it also for single elements:

var x = document.getElementByClassName("example");
x.style.backgroundColor = "red";

But in this case JavaScript will only change the first div it finds with a matching class.

To sum it up: There is no other convenient way than marking/tagging your elements in a way that they are unique and recognizable. Normally this is done by the name or the id. Class would also work but is seldomly used in this way.

Well, actually you could also iterate through the DOM and count the elments in order to change let's say the 15th div that appears. But what if you add additional divs a couple of days later? It's a very uncomfortable approach.

Use the localStorage and it will work using names or ids. You only have once to give every div it's id and/or name.