Как получить ElementById на другой странице через localstorage или cookie?

Question

[Артём Сергеев]

Как получить данные text_field_1 на другой станице? Например в поле input

Страница: 1

<script>
function someFunc(){
alert(document.getElementById("text_field_1").value);
}
document.getElementById("btn").onclick = someFunc;
</script>

Answer 1

[V Sh.]

Все просто: На одной странице мы записываем переменную в localStorage, а на другой - считываем данные из localStorage. Единственное ограничение (помимо объема localStorage, но для текстовых данных их за глаза хватает) это то, что страницы должны быть из одного домена.

Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com.

//Добавляем или изменяем значение:
localStorage.setItem('myKey', 'myValue'); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue"
 
//Выводм его в консоль:
var localValue = localStorage.getItem('myKey');
console.log(localValue); //"myValue"
 
//удаляем:
localStorage.removeItem("myKey");
 
//очищаем все хранилище
localStorage.clear()
 
//То же самое, только с квадратными скобками:
 
localStorage["Ключ"] = "Значение" //установка значения
localStorage["Ключ"] // Получение значения
delete localStorage["Ключ"] // Удаление значения

Answer 2

[seriogja]

Добрый день!

Можно значение, полученное функцией getElementById (или чем-то другим), хранить в куках или сессии, если работаете с бэкендом. А вообще необходимость подобных манипуляций наталкивает на мысль, что у вас что-то не так организовано)

Comments

[V Sh.]

Почему же сразу "не так организовано"? Никто не мешает хранить, например, настройки отображения информации в localStorage. Меняются они на одной странице, а используются на всех. Не обязательно задействовать везде сервер.

[seriogja]

V Sh.: Потому, что после записи в localStorage данные на другой вкладке никак "не узнают", что настройки (или какие-то другие абстрактные данные изменились). В другой вкладке пользователю нужно инициировать чтение из localStorage. В таком случае нужна событийная модель. Отсюда и предположение о "не так организовано". Но тут цель этих манипуляций не очень понятна, так как нет описания. Может быть тут и вовсе все просто. На использование сервера я и не настаивал, поэтому и написал: "если работаете с бэкендом". А данные, сохраненные в куках к серверу никакого отношения не имеют.

[V Sh.]

seriogja: Как это данные, сохраненные в cookies, никакого отношения к серверу не имеют? Они же к каждому HTTP-запросу цепляются. Они и нужны-то для того, чтобы определять на сервере, что это тот же самый пользователь, который тут минуту назад был, а не новый.

А расскажите-ка нам как вы организуете "событийную" модель, если данные у вас будут лежать не в localStorage, а на сервере. Будете постоянно открытым держать webSocket?

[seriogja]

V Sh.: Куки - это фактически просто key/value хранилище привязанное к домену. Зашли на сайт, куки выставились (в том числе идентификатор сессии сервера, который используется для того, чтобы "определять на сервере, что это тот же самый пользователь, который тут минуту назад был, а не новый", спасибо, я это и так знаю). Дальше вы эти куки можете javascript'ом хоть 10 раз переписать, никакого обращения к серверу не будет. И к серверу запросов никаких не будет. Да и сервера как такового может уже не существовать, но доступ к кукам у вас будет, так как они хранятся у клиента. Поэтому в этом случае, сохранение данных в куках к серверу никакого отношения не имеет.

В конкретной задаче не понятно нужно ли вообще использовать событийную модель или нет, повторю вам еще раз. А вообще да, webSoket, Long Poll, и т.д, что душе угодно.