Хранение настроек JavasScript локально

Question

С HTML5 и локальным хранилищем можно ли использовать JavaScript для сохранения состояния веб-страницы?

Например, некоторые сайты имеют increase font size кнопки, которые, скорее всего, управляются с помощью JS. Как сохранить свойство таким образом, чтобы при обновлении размер остался прежним? Или это делается без JS?

Answer 1

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

E.g.

var settings = { 
    fontSize: '11px', 
    otherConfig: 'test' 
}; 

localStorage.setItem('settings', JSON.stringify(settings)); 

//then you can retrieve it 
settings = JSON.parse(localStorage.getItem('settings')); 

console.log(settings.fontSize); //11px 

Обратите внимание, что если вы хотите, чтобы настройки сохраняются, когда пользователь подключается с нескольких компьютеров, вам придется использовать некоторую сторону сервера поддержку.

Answer 2

Да, это делается с помощью Javascript. Вы можете использовать

• Cookies

• Sessionstorage

  Это глобальный объект (sessionStorage), который поддерживает область памяти, которая доступна для продолжительности страницы сессии. Сеанс страницы длится до тех пор, пока браузер открыт и выживет через перезагрузку и восстановление. Открытие страницы в новой вкладке или окне приведет к запуску нового сеанса.

• Localstorage

  localStorage такой же, как sessionStorage с тем же правилами же происхождения, применяемых но она является постоянной.

Чем лучше/легче из них являются sessionStorage и localStorage. Проблема в том, что они не поддерживаются старыми браузерами.

Вместо этого использование куки-файлов может быть кошмаром, но они также работают на старых браузерах.

Answer 3

Да может сохранить состояние в localStorage.

Предположим, у вас есть объект:

var settingsObj={ 

    pageClass:'bigFont', 
    widgetSortOrder : [1,5,3,7] 

} 

Вы можете сэкономить, что весь объект одного локального ключа хранения, stringifying объект. При загрузке страницы вы увидите, если этот ключ существует в LocalStorage и ваш Javascript делать все, что Neds к с этими настройками

Для stringify и магазина:

localStorage.setItem('mySettings', JSON.stringify(settingsObj)); 

Для извлечения из хранилища и преобразовать в JS объект

var settings=JSON.parse(localStorage.getItem('mySettings'));