Создание данных

И sessionStorage, и localStorage сохраняют данные в форме отдельных элементов. Элементом считается пара из ключевого слова и значения, при этом каждое значение перед помещением в хранилище можно конвертировать в строку. Вы можете представлять себе элементы как переменные, обладающие именем и значением, которые можно создавать, модифицировать и удалять.

Для создания и извлечения элементов из пространства хранилища предназначены два новых метода, применяемые только в этом API:

— setItem(key, value). Для того чтобы создать элемент, нужно вызвать этот метод. Элемент создается с ключевым словом и значением, переданными в качестве аргументов метода. Если в хранилище уже есть элемент с таким ключевым словом, то ему присваивается новое значение, таким образом, данный метод позволяет модифицировать данные;

— getltem(key). Для извлечения значения из хранилища необходимо вызвать этот метод, передав ему ключевое слово нужного элемента. Ключевое слово должно совпадать с тем, которое было объявлено при создании элемента методом setItem().

Листинг 10.3. Сохранение и извлечение данных

Function initiate(){

Var button=document. getElementById(‘save’); button. addEventListener(‘click’, newitem, false);

}

Function newitem(){

Var keyword=document. getElementById(‘keyword’).value; var value=document. getElementById(‘text’).value; sessionStorage. setItem(keyword, value);

Show(keyword);

}

Function show(keyword){

Var databox=document. getElementById(‘databox’); var value=sessionStorage. getItem(keyword);

Databox. innerHTML='<div>’+keyword+’ — ‘+value+'</div>’;

}

Процесс чрезвычайно прост. Эти методы входят в объект sessionStorage, а синтаксис их вызова всегда одинаков: sessionStorage. setItem(). В коде из листинга 10.3 функция newitem() выполняется каждый раз, когда пользователь щелкает на кнопке формы. Эта функция создает элемент и добавляет в него информацию, полученную из формы, а затем вызывает функцию show(). Функция show(), в свою очередь, извлекает элемент из хранилища по ключевому слову, используя метод getItem(), а затем выводит его содержимое на экран.

Помимо этих методов, API хранения также предоставляет упрощенный способ создания и извлечения элементов из пространства хранилища, в котором ключевое слово элемента используется как свойство. Для этого способа предусмотрены два варианта синтаксиса в зависимости от типа информации, на базе которой создается элемент. Можно переменную, соответствующую ключевому слову, заключить в квадратные скобки (например, sessionStorage[KnKweB0e_^0B0]=3Ha4e^e), а можно передать строку в качестве имени свойства (например, sessionStorage. myitem=знaчение).

Листинг 10.4. Работа с элементами упрощенным способом

Function initiate(){

Var button=document. getElementById(‘save’); button. addEventListener(‘click’, newitem, false);

}

Function newitem(){

Var keyword=document. getElementById(‘keyword’).value; var value=document. getElementById(‘text’).value; sessionStorage[keyword]=value;

Show(keyword);

}

Function show(keyword){

Var databox=document. getElementById(‘databox’); var value=sessionStorage[keyword];

Databox. innerHTML='<div>’+keyword+’ — ‘+value+'</div>’;

}

Window. addEventListener(‘load’, initiate, false);