Как указано в комментарии @Manu Varghese, путь к go будет использовать sessionStorage или localStorage.
Во-первых, давайте различать оба. В соответствии с вопросом переполнения стека "HTML5 Локальное хранилище против хранилища сессий" , у нас есть следующий ответ:
localStorage и sessionStorage оба расширяют хранилище. Между ними нет никакой разницы, за исключением предполагаемого «непостоянства» sessionStorage.
То есть данные, хранящиеся в localStorage, сохраняются до тех пор, пока не будут явно удалены. Внесенные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.
Для sessionStorage изменения доступны только для каждой вкладки. Внесенные изменения сохраняются и доступны для текущей страницы на этой вкладке, пока она не будет закрыта. После закрытия сохраненные данные удаляются.
Учитывая, что они используются одинаково, и вы должны выбрать между тем, что лучше подходит для вашего случая, я продолжу использовать sessionStorage.
Для этого на первой странице вы должны использовать:
sessionStorage.setItem("key", "value")
Вы можете установить элемент вправо, когда почувствуете изменение, как во входном событии размытие .
и когда вы попадете на вторую страницу (именно тогда, когда jQuery вызывает ее стартовое событие), вы получите свои данные, используя:
sessionStorage.getItem("key")
Помните, что localStorage / sessionStorage может поддерживать ограниченный объем данных. Даже если этот лимит намного больше, чем URL, большинство браузеров будут хранить только 2,5–10 МБ на источник, в соответствии с реализацией браузера (вы можете проверить сами по ссылке, рекомендованной в MDN (Mozilla Development Network), http://dev-test.nemikor.com/web-storage/support-test/).
Кроме того, вы можете избегать хранения конфиденциальных данных в хранилищах из-за некоторых некоторых дискуссий о безопасности , которые, похоже, не являются здесь жалобой.
Реализация в данном случае
Ваш код можно изменить в три этапа:
- Изменить способ сохранения данных для использования storage
- Создает JSON объекта, содержащего массив, вместо этого делает JSON, используя сам массив. Затем вы можете добавить больше полей.
- Загрузить объект JSON и его поля (массив и число).
Шаг 1 - Переход на sessionStorage
Сейчас у вас есть Javascript на странице 1, создающий массив данных и переводящий эти данные в строку JSON.
Если вы хотите использовать хранилище, а не URL для всех данных, просто измените эти строки кода с:
let base64str=btoa(JSON.stringify(table_info));
window.location = "page2.html?table_data=" + base64str;
на код, который сохранит данные в (локальное / сессионное) хранилище:
let jsonStr=JSON.stringify(table_info); // converts to JSON string
sessionStorage.setItem("oldData", jsonStr); // save to storage
window.location = "page2.html"; // navigate to other page
Обратите внимание, что хранилище может принимать любые string , но только строки, тогда мы можем удалить функцию btoa, но мы должны оставить stringify.
Шаг 2. Добавление дополнительных данных для сохранения
Теперь у вас есть один JSON, который представляет собой массив элементов. Но что вы хотите, так это включить еще одно поле, параллельное этому массиву. Конечно, вы не можете включить его в массив, так как это совсем другое. Итак, что нам нужно сделать, это создать JSON объект, который имеет числовое поле и само поле массива.
Ваша функция для создания массива в порядке, тогда мы будем использовать ту же таблицу "как массив и включите его в новый JSON объект:
let table_data = []; // the array you have
$('input[type=checkbox]').each(
... rest of code ...
); // the function that creates the array (I abbreviated it here)
// Creates an object with an array and a number
let jsonObj = {
table_data: table_data,
number_of_clicks: theNumberYouHave/* your variable with the number here */
};
// This is the bit above with CHANGES into variable names
// Instead of "table_data", now we save "jsonObj"
let jsonStr=JSON.stringify(jsonObj); // converts the "jsonObj" to a JSON string
sessionStorage.setItem("oldData", jsonStr);
window.location = "page2.html";
Не забудьте изменить" theNumberYouHave "на то, что называется вашей переменной с номером. Вы добавите число в качестве поля объекта JSON.
Другими словами, это просто создаст такую структуру:
{
number_of_clicks: 5216,
table_data: [
{ name: "...", value: "..."},
{ name: "...", value: "..."},
{ name: "...", value: "..."},
...
]
}
Видите? Ваши table_data все еще там, но с новым братом (number_of_clicks) внутри объекта.
Шаг 3 - Загрузка данных со страницы 1
На данный момент у вас есть эти две строки кода в страница 2 для чтения данных со страницы 1:
let table_data = getUrlParameter('table_data');
let data_from_page_1 = JSON.parse(atob(table_data));
Вам нужно просто заменить функцию getUrlParameter для чтения из хранилища и удалить функцию atob, чтобы отразить изменения, которые мы сделали на странице 1, таким образом:
let jsonObj = sessionStorage.getItem("oldData"); // reads the string
let data_from_page_1 = JSON.parse(jsonObj); // parse the JSON string
let table_data = data_from_page_1.table_data; // grab the table data
let number_of_clicks = data_from_page_1.number_of_clicks; // grab the number
Теперь вы можете использовать переменную "table_data", как вы это делали, и использовать "number_of_clicks" так, как вы хотите ее использовать. Это число, переданное со страницы 1. Затем вы можете установить его в ячейку таблицы.
У вас есть уникальный идентификатор "sum1", который вы можете просто:
$("#sum1").text(number_of_clicks);
И все готово!