2016-06-26 2 views
1

Итак, я довольно новичок в JavaScript, и мне бы очень хотелось, чтобы этот код работал. Я просмотрел несколько других сообщений, рассказывающих о хранилище сеансов, а также о операторах if/else и по-прежнему не могу понять.Ошибка хранения сеанса JavaScript на другой странице

У меня есть страница, позволяет называть ее страницей 1 и имеет 3 ссылки, «красный», «зеленый» и «синий».

При нажатии на любом из этих ссылок его функция устанавливает переменную для хранения сессии «colorVar» к цвету выбранного и затем перенаправляет на страницу под названием страница 2.

Как страница 2 нагрузок window.onload действие используется для запуска функции в соответствии с переменной, установленной на стр. 1. В этом случае функция, которая начинается на стр. 2, просто отображает «Ваш цвет ____!».

Heres код:

<!-- [This is Page 1] --> 

<a href="Page2.html" onclick="colorRed()">Set color to red</a> 
<a href="Page2.html" onclick="colorBlue()">Set color to blue</a> 
<a href="Page2.html" onclick="colorGreen()">Set color to green</a> 

<script> 

function colorRed() { 
     sessionStorage.setItem("colorVar", "red"); 
} 
function colorBlue() { 
    sessionStorage.setItem("colorVar", "blue"); 
} 
function colorGreen() { 
    sessionStorage.setItem("colorVar", "green"); 
} 
</script> 

<!-- [This is Page 2] --> 

<script> 
window.onload = sessionStorage.colorVar + 'Write()'; 

function redWrite() { 
    document.write("Your color is red!") 
} 

function blueWrite() { 
    document.write("Your color is blue!") 
} 

function greenWrite() { 
    document.write("Your color is green!") 
} 
</script> 
+0

Открытие страницы в новой вкладке или окне приведет к запуску нового сеанса. См. Больше на странице https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage –

+0

Хмм, не будет ли сеансовое хранилище работать, если «Страница 2» открыта на той же вкладке, , или это также вызывает запуск нового сеанса? – John

+1

Это не сработает. Вы должны использовать локальное хранилище. –

ответ

2

Вы можете передать sessionStorage в виде строки запроса в href из <a> элемента; использовать location.search на window.onload события в Page2.html

page1.html

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 

<body> 
    <a href="Page2.html" data-color="red" onclick="color(this)">Set color to red</a> 
    <a href="Page2.html" data-color="blue" onclick="color(this)">Set color to blue</a> 
    <a href="Page2.html" data-color="green" onclick="color(this)">Set color to green</a> 

    <script> 
    function color(elem) { 
     event.preventDefault(); 
     sessionStorage.setItem("colorVar", elem.dataset.color); 
     location.href = elem.href + "?colorVar=" + sessionStorage.getItem("colorVar"); 
    } 
    </script> 
</body> 

</html> 

на Page2.html

<script> 
window.onload = function() { 
    document.write("Your color is " + location.search.split("=").pop()) 
} 
</script> 

plnkr http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview

+0

Это, безусловно, лучший ответ на эту проблему. Хорошая работа! –

1

Edit: Ясно answer above намного лучше, чем я. Я оставлю это здесь для будущих зрителей - возможно, так, как я сформулировал, что-то когда-то помогает кому-то.


Тейлор,

Две вещи.

  1. sessionStorage() уникален для каждой страницы/вкладки. From the docs «Открытие страницы в новой вкладке или окне приведет к новой сессии, которая будет инициирована»

  2. window.onload является expecting a function. Вы просто конкатенируете строку.

Если вы нашли другой способ передачи информации из одной страницы на другую (вы можете запихнуть его в URL) ваша новая функция цвета должна выглядеть примерно так:

<script> 
window.onload = writeColor(sessionStorage.colorVar); 

function writeColor(color) { 
    document.write("Your color is " + color + "!") 
} 
</script> 
0

Вы можете» t установить window.onload как строку; вы должны указать его прямо на функцию.

Я бы предложил создать новую функцию (назовите ее writeColor), которая содержит if операторов, основанных на значении sessionStorage.colorVar; то вы можете сделать window.onload=writeColor;

Альтернативно, измените свое окно.onload до window.onload = window[sessionStorage.colorVar + 'Write'];, который захватит вашу функцию из глобальной области и назначит ее window.onload.