НОУ ИНТУИТ | Перспективные языки веб-разработки. Лекция 8: Знакомство с технологией LocalStorage

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный

|

Вам нравится? Нравится 44 студентам

| Поделиться |

Поддержать программу

Аннотация: В ходе выполнения данной работы учащиеся познакомятся с технологией локального хранения данных.

Ключевые слова: 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>