Спонсор: Microsoft
Опубликован: 29.08.2012 | Доступ: свободный | Студентов: 2114 / 187 | Длительность: 08:05:00
Практическая работа 8:

Знакомство с технологией LocalStorage

< Лекция 5 || Практическая работа 8 || Практическая работа 9 >
Аннотация: В ходе выполнения данной работы учащиеся познакомятся с технологией локального хранения данных.
Ключевые слова: cookie, jQuery, MIN

Примеры

В HTML5 появилась возможность хранить данные в браузере. Размер локального хранилища регулируется самим браузером и равен примерно 5-10Мб. В отличие от cookie, данные могут храниться в течение длительного срока. Локальные хранилища могут использоваться при создании приложений для смартфонов.

Пример 1. Работа с локальным хранилищем

Для работы нам потребуется библиотека jquery-1.7.2.min.js. Скачайте ее с сайта http://jquery.com/. После чего откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Локальное хранилище данных</title>
<scriptsrc="jquery-1.7.2.min.js"type="text/javascript"></script>

<scripttype="text/javascript">
functionMol(Name, Description, Properties, Application) {
this.Name = Name;
this.Description = Description;
this.Properties = Properties;
this.Application = Application;
}

varmolecule;
molecule = newArray(newMol("Графен", "Двумерная аллотропная модификация углерода,
 образованная слоем атомов углерода толщиной в один атом, 
находящихся в sp^2-гибридизации и соединённых посредством σ- и π-связей в
 гексагональную двумерную кристаллическую решётку. 
Его можно представить как одну плоскость графита, отделённую от объёмного кристалла", "Обладает
 большой механической жёсткостью и хорошей 
теплопроводностью", "Высокая подвижность носителей заряда (максимальная подвижность 
электронов среди всех известных материалов) делает его 
перспективным материалом для использования в самых различных приложениях, в частности,
 как будущую основу наноэлектроники и возможную замену кремния 
в интегральных микросхемах"),
newMol("Фуллерен", "Молекулярные соединения, принадлежащие 
классу аллотропных форм углерода (другие - алмаз, карбин и графит) 
и представляющие собой выпуклые замкнутые многогранники, составленные из чётного числа 
трёхкоординированных атомов углерода", 
"В молекулах фуллеренов атомы углерода расположены в вершинах правильных шести- и пятиугольников, 
из которых составлена поверхность сферы или эллипсоида. 
Самый симметричный и наиболее полно изученный представитель семейства фуллеренов - фуллерен (C60), 
в котором углеродные атомы образуют усечённый икосаэдр, 
состоящий из 20 шестиугольников и 12 пятиугольников и напоминающий футбольный мяч",
 "Анализ электронной структуры фуллеренов показывает наличие 
π-электронных систем, для которых имеются большие величины нелинейной восприимчивости. 
Фуллерены действительно обладают нелинейными оптическими свойствами. 
Однако из-за высокой симметрии молекулы С60 генерация второй гармоники возможна только 
при внесении асимметрии в систему (например внешним электрическим полем). 
С практической точки зрения привлекательно высокое быстродействие (~250 пс), 
определяющее гашение генерации второй гармоники. 
Кроме того фуллерены С60 способны генерировать и третью гармонику"),
newMol("Углеродные нанотрубки", "протяжённые цилиндрические структуры 
диаметром от одного до нескольких десятков нанометров и длиной 
до нескольких сантиметров[1], состоящие из одной или нескольких свёрнутых в трубку
 гексагональных графитовых плоскостей и заканчивающиеся обычно 
полусферической головкой, которая может рассматриваться как половина молекулы фуллерена
", "Полупроводниковые модификации углеродных нанотрубок 
(разность индексов хиральности не кратна трём) являются прямозонными полупроводниками. 
Это означает, что в них может происходить непосредственная 
рекомбинация электрон-дырочных пар, приводящая к испусканию фотона. 
Прямозонность автоматически включает углеродные нанотрубки в число материалов 
оптоэлектроники", "Сверхпрочные нити, композитные материалы, нановесы, 
транзисторы, нанопровода, прозрачные проводящие поверхности, топливные элементы. 
Одностенныенанотрубки (индивидуальные, в небольших сборках или в сетях) являются миниатюрными 
датчиками для обнаружения молекул в газовой среде или в растворах 
с ультравысокой чувствительностью - при адсорбции на поверхности нанотрубки молекул её электросопротивление, 
а также характеристики нанотранзистора 
могут изменяться. Такие нанодатчики могут использоваться для мониторинга окружающей среды, в военных, 
медицинских и биотехнологических применениях")
);

vari, n;
varstr = "";
        n = molecule.length;

        $(function () {
varstr LocalStorage;

if (window.localStorage) {
strLocalStorage = "Браузер поддерживае тлокальное хранилище</p>";
varlocalData = molecule;

var data = JSON.stringify(localData);
window.localStorage.setItem('myLocalData', data);

} else {
strLocalStorage = "Браузер не поддерживает локальное хранилище</p>";
$('#localGet, #localDelete').attr('disabled', 'disabled');
            }

// получитьданные
            $('#localGet').bind('click', function () {
var local = $.parseJSON(window.localStorage.getItem('myLocalData'));
if (local !== null) {

for (i = 0; i< n; i++) {
str += "<b>Название: </b>" + local[i].Name + "<br/><u>
Описание: </u>" + local[i].Description + "<br/><u>Свойства: </u>" 
+ local[i].Properties + "<br/><u>Применение: </u>" + local[i].
Application + "<p/><p/>";
                    }
str += strLocalStorage;
document.write(str);
                } else {
str += strLocalStorage;
document.write(str);
                }
            })


        })
</script>
</head>
<body>
<divid="buttons">
	<buttonid="localGet">Локальноехранилище</button>
</div>
</body>
</html>
    

Разработайте локальное хранилище, в котором можно было бы хранить сведения о товарах.

< Лекция 5 || Практическая работа 8 || Практическая работа 9 >
Александр Лобанов
Александр Лобанов

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

Наталья Алмаева
Наталья Алмаева
Россия
Вадим Барков
Вадим Барков
Украина, Киев