localStorage
Отметьте, чтобы увидеть localStorage
, например, в firebug вам будет необходимо установить расширение FireStorage Plus!
В кэше браузера можно сохранять данные. localStorage
– это хранилище для хранения данных вида: ключ/значение. localStorage
в отличие от cookie позволяет хранить большой объем данных для определенного домена и для конкретного браузера. Данные сохраняются и после закрытия браузера.
Методы и свойства LocalStorage:
setItem(key, value)
setItem(key, value)
устанавливаем значение заданного ключа.
Например,
localStorage.setItem('keyname', 'value');
localStorage.setItem('bgcolor', 'red');
getItem(key)
getItem(key)
получаем значение заданного ключа.
Например,
localStorage.getItem('keyname');
localStorage.keyname
removeItem(key)
removeItem(key)
удаляем ключ и соотв-е ему значение
Например,
localStorage.removeItem('keyname')
clear()
clear()
удаляем все пары вида ключ/значение. Например,
localStorage.clear()
length
length
получаем сколько пар вида ключ/значение хранится в localStorage
.
Например,
localStorage.length
key(position)
key(position)
возвращает ключ для значения, имеющего заданную числовую позицию.
Например,
localStorage.key(pos)
Пример
jQuery or Javascript
var todoModel = (function () {
var _data = [];
function _addItem(name, duedate, description, completed) {
_data.push({
id: getCurrentId(),
name: name,
duedate: duedate,
description: description,
completed: completed
});
}
function _save() {
window.localStorage["tasks"] = JSON.stringify(_data, function (key, val) {
// JSON.stringify() преобразует значение JavaScript в строку JSON
if (key == '$$hashKey') {
return undefined;
}
return val
});
}
function _read() {
var temp = window.localStorage["tasks"]
if (!temp) _data = [];
else _data = JSON.parse(temp);
// JSON.parse() разбирает строку JSON, Возвращает объект
return _data;
}
return {
data: _data,
addItem: _addItem,
save: _save,
read: _read
};
})();
+ реализация работ функционала на angularjs:
var testApp = angular.module("testApp", []);
testApp.controller("testAppdCtrl", function($scope) {
$scope.data = todoModel.read();
// добавляем новый task при нажатии на кнопку
$scope.addNewTask = function() {
todoModel.addItem(
$scope.taskName,
$scope.taskDue_data,
$scope.taskDescription,
$scope.taskCompleted
);
todoModel.save();
$scope.data = todoModel.read();
}
// очищаем localStorage
$scope.clearTask = function() {
localStorage.clear();
$scope.data = todoModel.read();
}
});
Комментарии к статье