Хранение информации локально на user’ компьютере является мощной стратегией для разработчиков, которые создают что-то для Web.В этой статье we’ будем смотреть на то, как легко можно хранить информацию на компьютере, чтобы прочитать позже и объяснить, что вы можете использовать эту for.
Добавление состояние в Web: “Почему” местных Storage
Основная проблема с HTTP качестве основного транспортного уровня веб-то, что это stateless.Это означает, что когда вы используете приложение, а затем закрыть его, его состояние будет сброшен в следующий раз вы ее открыть.Если закрыть приложение на рабочем столе и вновь открыть его, его последнее состояние restored.
Вот почему, как разработчик, вы должны сохранить состояние вашего интерфейса где-то.Как правило, это делается на стороне сервера, и вы бы проверить имя пользователя, чтобы знать, какие государства вернуться.Но что, если вы don’? Хотите, чтобы заставить людей подписать
Это где местного storage приходит дюйма Вы бы держать клавишу на user’ компьютер с и прочитал его, когда пользователь returns.
C Is For Cookie.Это хорошо для меня достаточно
Классический способ сделать это с помощью печенья.Печенье это текстовый файл, размещенный на user’ с компьютера и подключен к домену, что ваш сайт работает на.Вы можете хранить информацию в них, читать их и удалить их.Cookies есть несколько ограничений, хотя:
- Они добавляют к нагрузке каждого документа доступен на domain.
- Они позволяют только до 4 Кбайт данных storage.
- Потому что печенья были использованы, чтобы шпионить за people’ S серфинга поведения, заботятся о безопасности людей и компаний, отключите их или просить, чтобы попросить каждый раз, будь печенье должно быть set.
Чтобы обойти вопрос о локальном хранилище — с печеньем бытия, а от решения проблемы — WHATWG и W3C придумал нескольких местных хранения specs, которые первоначально были частью HTML5, но затем отложил, потому чтоHTML5 уже был большой enough.
Использование локального хранилища в HTML5-совместимая Browsers
Использование местные storage в современных браузерах до смешного просто.Все, что вам нужно сделать, это изменить localStorage объекта в JavaScript.Вы можете сделать это прямо или (и это, вероятно, очиститель) использовать setItem() и getItem() метод:
localStorage.setItem('favoriteflavor','vanilla');
Если вы зачитал favoriteflavor ключ, вы получите обратно “ vanilla”:
var taste = localStorage.getItem('favoriteflavor');
// -> "vanilla"
Удалить элемент, вы можете использовать — вы можете догадаться?- removeItem() метод:
localStorage.removeItem('favoriteflavor');
var taste = localStorage.getItem('favoriteflavor');
// -> null
That’ и все!Вы также можете использовать sessionStorage, а localStorage Если вы хотите, чтобы данные будут сохраняться только до тех пор пока окно браузера closes.
Рабочая Вокруг “ Струны Only” Issue
Одна из раздражающих недостатков локального хранилища, что вы можете хранить только строки в разные ключи.Это означает, чтокогда у вас есть объект, он не будет храниться право way.
Вы можете увидеть это, когда вы пытаетесь следующий код:
var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', car );
console.log( localStorage.getItem( 'car' ) );
Попытка это в консоли показывает, что данные хранятся в виде [object Object], а не реальной информации об объекте:
Вы можете обойти это с помощью родного JSON.stringify() и JSON.parse() методы:
var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', JSON.stringify(car) );
console.log( JSON.parse( localStorage.getItem( 'car' ) ) );
Где найти местных хранения данных и как ее устранить It
В процессе разработки, вы можете иногда застревают и интересно, что происходит.Конечно, вы всегда можете получить доступ к данным, используя правильные методы, но иногда вы просто хотите, чтобы очистить тарелку.В Opera, вы можете сделать это, зайдя в Предпочтения → Расширенный → Storage, где вы сможете увидеть, какие области имеют локальные данные и сколько:
Делать это в Chrome является немного более проблематично, поэтому мы сделали скринкаст:
Mozilla не имеет доступа к меню так далеко, но будет в будущем.На данный момент, вы можете пойти на консоль Firebug и удаления хранилища вручную легко enough.
Итак, that’ ы, как вы используете локальное хранилище.Но что вы можете использовать его для
Использование Дело № 1: локального хранения веб-службы Data
Одним из первых применений для локального хранения данных, что я обнаружил, было кэширования данных из Web, когда она занимает много времени, чтобы получить его.Мой Мир Info запись для события 10K Apart задача показывает, что я имею в виду that.
Когда вы звоните демо в первый раз, вам придется подождать до 20 секунд для загрузки …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров