クッキーを使ってページの状態を保存する方法は？

私は自分のウェブサイトに夜間モードの機能を持っています。下のコードは私のウェブサイトのコードの簡単な例です。私はどのようにページの状態を保存することができるので、それはページの更新後に暗い/明るいままになるのだろうと思っていた。私はクッキーでこれをしますか？私はかつて私のウェブサイトのいずれにもクッキーを実装しておらず、本当に役立つことができました。ここでクッキーを使ってページの状態を保存する方法は？

は、スクリプトを有効にするには、その上にボタンが付いたHTMLである：ここでは

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="utf-8"/> 

<title>Ryan Simms</title> 

</head> 

<body> 
<script src="scripts/lightSwitch.js"></script> <!-- Loads Script --> 

<footer> 
    <button type="button" id="lightSwitchOff"></button> 
    <button type="button" id="lightSwitchOn"></button> 
</footer> <!-- Closes Footer --> 

</body> 

</html>

はjavascriptのです：

document.addEventListener ("DOMContentLoaded", handleDocumentLoad); 

function handleDocumentLoad() { 

//Variable 
var offSwitch = document.getElementById("lightSwitchOff"); //Targets div with ID lightSwitchOff 
var onSwitch = document.getElementById("lightSwitchOn"); //Targets div with ID lightSwitchOn 
var style = document.getElementById("pageStyle"); //Targets stylsheet 
offSwitch.innerHTML = "Turn On Night Mode"; 
onSwitch.innerHTML = "Turn Off Night Mode"; 
onSwitch.style.display = "none"; 

//Event Listener 
offSwitch.addEventListener("click", lightsOff); //When clicked this action is performed 
onSwitch.addEventListener("click", lightsOn); //When clicked this action is performed 

//Function 
function lightsOff() { /*This changes the background colour to black and makes text white*/ 
    style.setAttribute('href', 'css/darkStyle.css'); 
    onSwitch.innerHTML = "Turn Off Night Mode"; 
    onSwitch.style.display = "inline"; 
    offSwitch.style.display = "none"; 
} 

function lightsOn() { /*This changes the background colour to a white and makes text black*/ 
    style.setAttribute('href', 'css/lightStyle.css'); 
    offSwitch.innerHTML = "Turn On Night Mode"; 
    onSwitch.style.display = "none"; 
    offSwitch.style.display = "inline"; 
} 
}

出典

2017-12-10 Ryan

セットクッキー：

document.cookie = "cookieName=cookieValue";

することができますまた、クッキーが属するべきパスを指定します。デフォルトは現在のページです。これは、長い文字列にcookiesの値を設定します

var cookies = document.cookie;

ように配置された：

"cookie1=value1;cookie2=value2"

あなたが他のサイトからのクッキーにアクセスすることはできません注意、および文書

documenet.cookie = "cookieName=cookieValue; path=/folder/";

はクッキーを読みます.cookieは現在のドメインのCookieのみを返します。

https://www.w3schools.com/js/js_cookies.aspにはクッキーチュートリアルがあります。

ここでは、構文解析を行う方法の例です：

var sugar = document.cookie; 
// finds the lights cookie 
var start = sugar.indexOf("lights="); 
// if there is a light cookie 
if (start != -1) { 
    // moves the start index to the value of the cookie 
    start += "lights=".length; 
    // finds the end of the lights cookie value 
    var end = sugar.indexOf(";", start); 
    var cookieValue; 
    // extract the value of the lights cookie 
    if (end == -1) { 
     cookieValue = sugar.substring(start); 
    } else { 
     cookieValue = sugar.substring(start, end); 
    } 

    if (cookieValue == "on") { 
     lightsOn(); 
    } else { 
     lightsOff(); 
    } 
}

出典

2017-12-10 18:52:35 ImprobabilityCast

私はまだ私の場合の例でどうなるか少し混乱していますか？ – Ryan

あなたの 'lightsOn（）'関数では 'document.cookie =" lights = on ";'そして 'handleDocumentLoad（）'関数で 'document.cookie'文字列を解析してif値 "on"のクッキー "lights"が含まれています。もしそうなら、 'lightsOn（）'関数を呼び出します。 – ImprobabilityCast

さて、私は自分のライトで機能と消灯機能にクッキーを追加しましたが、それらを解析して何が含まれているかを確認することはできません。それは本当に私を混乱させています、私は申し訳ありません、私はクッキーを初めて知っています – Ryan

クッキーを使ってページの状態を保存する方法は？

答えて

関連する問題