HTML5 window.localStorage -JavaScript

[Jere Sumell]

Ohjelmoin tänään HTML5/JavaScript -tekniikoilla HTML-värivalitsimen ja julkaisin sen nyt illalla kotisivuillani ja sain positiivista palautetta Ohjelmointiputkassa tästä, mutta minulle ehdotettiin, että suurempi hyöty käyttäjälle saavutettaisiin, jos hyödyntäisi tuota window.localStorage -luokan käyttöä, mutta se on uusi minulle, voisiko joku veistää rautalangasta, miten sitä käytetään ja miten se toimii.

Suora linkki HTML-värivalitsimeeni on
https://jeresumell.munsivu.fi/ohjelmat/htmlC.html

Lisäsin vielä nuo Radio-buttonit tuohon, että käyttäjä saa valita, vaikka sama se, kun toinen ohjelman esittämä väri on valitun värin vastaväri, opponent colour.

[Jere Sumell]

En nyt käsitä, vaikka tuo localStorage nyt niin vaikealta asialta vaikuta, mutta missä kohtaa vienti ja muuttujan tuonti pitäisi suorittaa.

Tässä aja() -metodini, jota kutsutaan, kun käyttäjä käyttää noita liukuimia ja valitsee haluamansa värin

Koodia: [Valitse]

function aja() {
if (typeof(Storage) !== "undefined") {
localStorage.setItem('red', document.getElementById("redRange").value);
localStorage.setItem('green',document.getElementById("greenRange").value);
localStorage.setItem('blue', document.getElementById("blueRange").value);
}
var rHex = toHex(localStorage.getItem('red'));
var gHex = toHex(localStorage.getItem('green'));
var bHex = toHex(localStorage.getItem('blue'));
var full = rHex+gHex+bHex;
var oppR = invertColor(full);
var pick = document.querySelector('input[name="userColorPick"]:checked').value;


if (pick =="Background") {

document.getElementById("demo").style.backgroundColor = '#'+full;
document.getElementById("demo").style.color = oppR;
document.getElementById("rgb").innerHTML = 'RGB-code:(' +'R:'+sliderR.value+', G:'+sliderG.value +', B:'+ sliderB.value+')';
document.getElementById("hexD").innerHTML = 'Hex-Code: ' +'#' +full;
document.getElementById("oppC").innerHTML = 'Opposite color: ' + oppR;
}
if (pick == "Text") {
document.getElementById("demo").style.backgroundColor = oppR;
document.getElementById("demo").style.color = '#'+full;
document.getElementById("rgb").innerHTML = 'RGB-code:(' +'R:'+sliderR.value+', G:'+sliderG.value +', B:'+ sliderB.value+')';
document.getElementById("hexD").innerHTML = 'Hex-Code: ' +oppR;
document.getElementById("oppC").innerHTML = 'Opposite color: ' + full;
}
};