Làm cách nào để lưu dữ liệu từ biểu mẫu bằng Bộ nhớ cục bộ HTML5?

Question

Tôi có một biểu mẫu đăng nhập vào một trang web nhưng không phải trong tôi và tôi muốn chúng được lưu dữ liệu biểu mẫu trong web của tôi với bộ nhớ cục bộ HTML5. Nhưng không phải như thế nào. Bất kỳ ý tưởng? Biểu mẫu của tôi là:

<form action="http://issuefy.ca.vu/on/login.php" class="form-login" method="post" /> 
<input name="email" type="email" id="email" required="" placeholder="Email" /> 
<input name="password" type="password" required="" placeholder="Contraseña" /> 
</form> 

Answer 1

LocalStorage có phương thức setItem. Bạn có thể sử dụng nó như thế này:

var inputEmail= document.getElementById("email"); 
localStorage.setItem("email", inputEmail.value); 

Khi bạn muốn để có được những giá trị, bạn có thể làm như sau:

var storedValue = localStorage.getItem("email"); 

Nó cũng có thể để lưu trữ các giá trị trên nút bấm, như vậy:

<button onclick="store()" type="button">StoreEmail</button> 

<script type="text/javascript"> 
    function store(){ 
    var inputEmail= document.getElementById("email"); 
    localStorage.setItem("email", inputEmail.value); 
    } 
</script> 

Answer 2

bạn có thể sử dụng openDB cho các thao tác lưu trữ địa phương

trong đó bạn c một bộ hoặc nhận dữ liệu theo cách này -

db.local.set("key", "value"); // set 
db.local.get("key"); // get 

Answer 3

Dưới đây là một chức năng nhanh chóng mà sẽ lưu trữ các giá trị của một <input>, <textarea> vv trong lưu trữ địa phương, và khôi phục lại nó trên tải trang.

function persistInput(input) 
{ 
    var key = "input-" + input.id; 

    var storedValue = localStorage.getItem(key); 

    if (storedValue) 
     input.value = storedValue; 

    input.addEventListener('input', function() 
    { 
     localStorage.setItem(key, input.value); 
    }); 
} 

Yếu tố đầu vào của bạn phải có id được chỉ định là duy nhất trong số tất cả các chức năng của chức năng này. Chính là id này xác định giá trị trong bộ nhớ cục bộ.

var inputElement = document.getElementById("name"); 

persistInput(inputElement); 

Lưu ý rằng phương pháp này thêm trình xử lý sự kiện không bao giờ bị xóa. Trong hầu hết các trường hợp, đó sẽ không phải là vấn đề, nhưng bạn nên cân nhắc xem nó có nằm trong kịch bản của bạn hay không.