локальное хранилище с использованием html5

Мне нужно сохранить значения, которые пользователь вводит в каждом из полей через html5. Когда пользователь обновляет страницу, он должен сохранять значения в каждом из текстовых полей. У меня был друг, который сказал мне, что это сработает, но это не так, и я не получаю никаких ошибок в консоли.локальное хранилище с использованием html5

<script> 
function storageValue() { 
    var uno = document.getElementById("storage1"); 
    var duck = uno.value 
    var dos = document.getElementById("storage2"); 
    var duckie = dos.value 
    var tres = document.getElementById("storage3"); 
    var rubberDuck = tres.value 
    var quatro = document.getElementById("storage4"); 
    var rubberDuckie = quatro.value 
    alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie); 
    localStorage.setItem('duck', duck); 
    localStorage.setItem('duckie', duckie); 
    localStorage.setItem('rubberDuck', rubberDuck); 
    localStorage.setItem('rubberDuckie', rubberDuckie); 
    checkLocalStorage(); 
} 

function checkLocalStorage() { 
    var poodle = document.getElementById('storage1').value 
    poodle.innerHTML = localStorage["duck"] 
    var cow = document.getElementById('storage2').value 
    poodle.innerHTML = localStorage["duckie"] 
    var dog = document.getElementById('storage3').value 
    dog.innerHTML = localStorage["rubberDuck"] 
    var cat = document.getElementById('storage4').value 
    cat.innerHTML = localStorage["rubberDuckie"]; 
} 

checkLocalStorage();

Вот HTML, что у меня есть:

<body align="center" style="background-color:red;"> 
    <div> 
     <header> 
      <h1>Local Storage</h1> 
     </header> 
     <input type="text" id="storage1" size="40" placeholder="Please enter a value"> 
     <input type="text" id="storage2" size="40" placeholder="Please enter a value"> 
     <input type="text" id="storage3" size="40" placeholder="Please enter a value"> 
     <input type="text" id="storage4" size="40" placeholder="Please enter a value"> 
     <br> 
     <br> 
     <input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'> 
     <div id="storageDiv"></div> 
     <nav> 
      <p> 
       <a href="/">Home</a> 
      </p> 
      <p> 
       <a href="/contact">Contact</a> 
      </p> 
     </nav> 

     <div> 

     </div> 

     <footer> 
      <p> 
       &copy; Copyright by Alan Sylvestre 
      </p> 
     </footer> 
    </div> 
</body>

источник

2013-05-26 Alan Joseph Sylvestre

Является 'storageValue()' вызывается? Вы перешли через отладчик? Появляется ли предупреждение? –

Каковы ошибки? – Alan

Ошибка в том, что она не сохраняет значение в текстовом поле при обновлении страницы. Форма сбрасывается. –

-1

Ниже была взята из W3schools

if(typeof(Storage)!=="undefined") 
    { 
    // Yes! localStorage and sessionStorage support! 
    // Some code..... 
    } 
else 
    { 
    // Sorry! No web storage support.. 
    }

Ваш друг прав, LocalStorage должен работать с HTML5. Вы уверены, что ваш сайт работает правильно с HTML5()

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

Без дополнительной информации об ошибках, это все, что я могу действительно порекомендовать.

EDIT: Из комментария он не работает в Chrome - вы уверены, что Chrome недавно обновлен?

источник

2013-05-26 06:13:32 gersande

Я не уверен, что он был обновлен. Я проверю это прямо сейчас. –

Не используйте W3Schools –

Ваш storageValue функция кажется нормально, но ваш checkLocalStorage функция нуждается в фиксации;

Вам нужно что-то немного более симметричное:

localStorage.setItem('duck', document.getElementById("storage1").value); 
... 
document.getElementById("storage1").value = localStorage.getItem('duck');

предпочтительно с некоторым кодом для предоставления значений по умолчанию и проверки значений, и т.д ..

но то, что у вас есть в вашей checkLocalStorage функции:

var poodle = document.getElementById('storage1').value 
poodle.innerHTML = localStorage["duck"]

... который даже не имеет смысла.

источник

2013-05-26 06:32:35 jongo45

Рабочая JS Fiddle: http://jsfiddle.net/9BN5r/

Проблема заключается в том вы пытаетесь установить innerHTML поля ввода. Вам нужно установить значение. Измените checkLocalStorage() функцию:

function checkLocalStorage() { 
    var poodle = document.getElementById('storage1'); 
    poodle.value = localStorage['duck']; 

    var cow = document.getElementById('storage2'); 
    cow.value = localStorage['duckie']; 

    var dog = document.getElementById('storage3'); 
    dog.value = localStorage['rubberDuck']; 

    var cat = document.getElementById('storage4'); 
    cat.value = localStorage['rubberDuckie']; 
}

источник

2013-05-26 06:37:28 chrislondon

 if(typeof(Storage) !== "undefined") { 
     // working 
    } else { 
     // Not Support 
    } 
    Store Data 

    //Syntax 
    localStorage.setItem(Key,Value); 
    //By localStorage Object Method 

    localStorage.setItem('name','TEST'); 

    Retrieve Data 
    var a = localStorage.getItem('name'); 
    alert(a); //Output : TEST 


    Remove Data 
    localStorage.removeItem('name'); 


    Remove All Data 
    localStorage.clear();

Test Demo

источник

2015-07-14 05:52:59 Kamal

Пожалуйста, исправьте форматирование кода и добавьте описание (вы должны сделать «Получить данные» и другие комментарии к текущим комментариям). – royhowie

локальное хранилище с использованием html5

ответ

Смежные вопросы