Локальное хранилище - демонстрация HTML5 с кодом [закрыто
-
10-10-2019 - |
Вопрос
Я пытаюсь работать с локальным хранилищем с формами, используя HTML5. Я просто не могу найти единую рабочую демонстрацию в Интернете. Может ли кто -нибудь найти мне хорошую демонстрацию и учебник, который работает. Мой браузер полностью поддерживается.
Ценю всю помощь. Спасибо
Решение
Посмотри на MDC - Dom Storage или же Проект W3C WebStorage (ОК, меньше демонстрации и больше описания). Но API не такой большой.
Другие советы
Вот jsfiddle демо
(Копия соответствующего кода JS, использование LocalStorage вызывает в комментариях)
//Note that if you are writing a userscript, it is a good idea
// to prefix your keys, to reduce the risk of collisions with other
// userscripts or the page itself.
var prefix = "localStorageDemo-";
$("#save").click(function () {
var key = $("#key").attr('value');
var value = $("#value").attr('value');
localStorage.setItem(prefix + key, value); //******* setItem()
//localStorage[prefix+key] = value; also works
RewriteFromStorage();
});
function RewriteFromStorage() {
$("#data").empty();
for(var i = 0; i < localStorage.length; i++) //******* length
{
var key = localStorage.key(i); //******* key()
if(key.indexOf(prefix) == 0) {
var value = localStorage.getItem(key); //******* getItem()
//var value = localStorage[key]; also works
var shortkey = key.replace(prefix, "");
$("#data").append(
$("<div class='kvp'>").html(shortkey + "=" + value)
.append($("<input type='button' value='Delete'>")
.attr('key', key)
.click(function() { //****** removeItem()
localStorage.removeItem($(this).attr('key'));
RewriteFromStorage();
})
)
);
}
}
}
RewriteFromStorage();
Вот пример LocalStorage HTML5.
Вот скрипка http://jsfiddle.net/ccatto/g2syc/2/ Демонстрационный пример кода.
Простой код будет:
// saving data into local storage
localStorage.setItem('LocalStorageKey', txtboxFooValue);
// getting data from localstorage
var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);
Вот более полный пример кода, в котором вы вводите текст в текстовое поле и нажимаете кнопку. Затем текст хранится в LocalStorage, извлекается и отображается в Div.
<h2>HTML LocalStorage Example</h2>
<section>
<article>
Web Storage example:
<br />
<div id="divDataLocalStorage"></div>
<br />
Value
<input type="text" id="txtboxFooExampleLocalStorage" />
<input type="button" id="btnSaveToLocalStorage" value="Save Text to Local Storage" />
</article>
</section>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
console.log("start log");
$("#btnSaveToLocalStorage").click(function () {
console.log("inside btnSaveToLocalStorage Click function");
SaveToLocalStorage();
});
function SaveToLocalStorage(){
console.log("inside SaveToLocalStorage function");
var txtboxFooValue = $("#txtboxFooExampleLocalStorage").val();
console.log("text box Foo value = ", txtboxFooValue);
localStorage.setItem('LocalStorageKey', txtboxFooValue);
console.log(" after setItem in LocalStorage");
RetrieveFromLocalStorage();
}
function RetrieveFromLocalStorage() {
console.log("inside Retrieve from LocalStorage");
var retrivedValue = 'None';
var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);
$("#divDataLocalStorage").text(retrivedValue);
console.log("inside end of retrieve from localstorge");
console.log("retrieved value = ", retrivedValue);
}
</script>
Надеюсь это поможет!
Локальное хранилище является частью API HTML5 - это объект, и мы можем получить доступ к этому объекту и его функциональности через JavaScript. Во время этого урока мы будем использовать JavaScript, чтобы взглянуть на основы локального объекта хранения и того, как мы можем хранить и получать данные, на стороне клиента.
Локальные элементы хранения устанавливаются в парах ключей/значения, поэтому для каждого элемента, который мы хотим хранить на клиенте (устройство конечного пользователя), нам нужен ключ - этот ключ должен быть напрямую связан с данными, с которыми он хранится.
Есть несколько методов и важное свойство, к которому у нас есть доступ, поэтому давайте начнем.
Вы бы ввели этот код в документ HTML5, внутри тегов сценария.
Установка элементов
Во -первых, у нас есть метод setItem (), который принимает нашу ключ/ значение (или иногда называемое как имя/ значение) в качестве аргумента. Этот метод очень важен, так как он позволит нам фактически хранить данные на клиенте; Этот метод не имеет конкретного возвращаемого значения. Метод setItem () выглядит так:
localStorage.setItem("Name", "Vamsi");
Получение предметов
Теперь, когда мы посмотрели на хранение некоторых данных, давайте получим некоторые из этих определенных данных из локального хранилища. Для этого у нас есть метод getItem (), который принимает ключ в качестве аргумента и возвращает связанное с ним строковое значение:
localStorage.getItem("Name");
Удаление предметов
Другим методом интереса для нас является метод removeItem (). Этот метод удалит предметы из локального хранилища (позже мы поговорим о «опорожении» локального хранилища). Метод removeItem () принимает ключ в качестве аргумента и удалит значение, связанное с этим ключом. Это выглядит так:
localStorage.removeItem("Name");
Вот пример примера.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Local Storage</title>
<script>
localStorage.setItem("Name", "Vamsi");
localStorage.setItem("Job", "Developer");
localStorage.setItem("Address", "123 html5 street");
localStorage.setItem("Phone", "0123456789");
console.log(localStorage.length);
console.log(localStorage.getItem("Name"));
localStorage.clear();
console.log(localStorage.length);
</script>
</head>
<body>
</body>
</html>