Hướng dẫn save user input local storage javascript - lưu javascript lưu trữ cục bộ đầu vào của người dùng

Tôi đang cố gắng xây dựng ứng dụng web đầu tiên của mình. Trong ứng dụng của tôi, tôi cần phải có bảng điều khiển cài đặt, nhưng tôi không biết làm thế nào để làm điều đó. Tôi đã tìm kiếm trên web và bắt gặp một địa phương HTML5, mà tôi tin rằng có thể là cách tốt nhất để làm mọi việc. Nhưng vấn đề là tôi không biết làm thế nào để sử dụng nó.

Làm thế nào tôi có thể lưu dữ liệu từ đầu vào vào localStorage khi người dùng nhấp vào nút? Một cái gì đó như thế này?

  

Save/button>

    

Hỏi ngày 26 tháng 4 năm 2012 lúc 12:18Apr 26, 2012 at 12:18

1

Đối tượng

  

Save/button>

    

  

Save/button>

    

1. Một khóa mà bạn có thể tham khảo mục

2. Một giá trị

   var input = document.getElementById("saveServer");
   localStorage.setItem("server", input.val());
   

Mã trên trước tiên có một tham chiếu đến phần tử

  

Save/button>

    

  

Save/button>

    

Bạn có thể truy xuất giá trị bằng cách gọi

  

Save/button>

    

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

Thở dài

3.6212 Huy hiệu vàng22 Huy hiệu bạc39 Huy hiệu Đồng2 gold badges22 silver badges39 bronze badges

Đã trả lời ngày 26 tháng 4 năm 2012 lúc 12:23Apr 26, 2012 at 12:23

James Allardicejames AllardiceJames Allardice

162K21 Huy hiệu vàng328 Huy hiệu bạc310 Huy hiệu Đồng21 gold badges328 silver badges310 bronze badges

2

Điều này làm việc cho tôi. Để cài đặt, tôi đã đặt

  

Save/button>

    

  

Save/button>

    

  

Save/button>

    

  

Save/button>

    

var input = document.getElementById('saveServer').value;
localStorage.setItem('server', input);

Để lấy lại văn bản:

document.getElementById('saveServer').value = localStorage.getItem('server');

Đã trả lời ngày 7 tháng 2 năm 2015 lúc 12:25Feb 7, 2015 at 12:25

StephanstephanStephan

Huy hiệu Bạc 911 Huy hiệu Đồng1 silver badge5 bronze badges

Đây là một hình thức mà người dùng nhập một số dữ liệu.

Và đây là mã HTML có dạng trên.

    {% csrf_token %}
    
    

        

            

                Name
                                       placeholder="Enter Name"/>
            

        

        

            

                Class
                
            

        

    

    

        

            

                Sub Class
                
            

        

        

            

                Infra Class
                
            

        

    

    

        

            

                Average Weight
                                       placeholder="xxx Kg"/>
            

        

        

            

                Living Area
                
            

        

    

    

        

            

                Living Period
                                       placeholder="xxx Time"/>
            

        

        

            

                Living In Groups
                
                    
                    Yes
                    No
                
 

 

 

 

 Submit
 

Trường hợp mỗi trường có ID duy nhất của nó mà theo đó nó có thể được truy cập thông qua JavaScript.

Bây giờ chúng tôi viết một số mã của JavaScript để lưu trữ giá trị của đầu vào người dùng vào LocalStorage và sau đó chúng tôi có thể sử dụng nó cho một trang khác hoặc bất cứ nơi nào trong ứng dụng của chúng tôi như chúng tôi muốn.

var click = document.getElementById('submit');
click.addEventListener('click', addData);
var arr = new Array();
function addData(){
    DeleteData();
    getData();
    var cv = document.getElementById('weight').value;
    cv = parseInt(100) + parseInt(cv);
    document.getElementById('weight').value = cv;
    arr.push({
        name:document.getElementById('name').value,
        animal_class:document.getElementById('animal_class').value,
        sub_class:document.getElementById('sub_class').value,
        infra_class:document.getElementById('infra_class').value,
        weight:document.getElementById('weight').value,
        living_place:document.getElementById('living_place').value,
        living_period:document.getElementById('living_period').value,
        living_in_groups:document.getElementById('living_in_groups').value
    });
        localStorage.setItem("localData", JSON.stringify(arr));
}
function getData(){
    var str = localStorage.getItem("localData");
    if (str!= null)
        arr = JSON.parse(str);
}



function DeleteData(){
localStorage.clear();
}

Trong mã trên của JavaScript Khi người dùng nhập một số dữ liệu và nhấp vào nút Gửi, nút đó kích hoạt một số hàm như được mô tả và toàn bộ kịch bản sẽ được xử lý. Trong mã này, chúng tôi đã tạo ba hàm:

1“getData” that fetch the data from localStorage using key “localData”.

2. DeletEdata (), loại bỏ mục khỏi LocalStorage.“deleteData()” that remove the item from localStorage.

3. và hàm được kích hoạt trên adddata (), trước tiên lấy các giá trị từ trường bằng {document.getEuityById (‘id,). Giá trị} và sau đó lưu trữ các giá trị này vào localStorage bằng Array ();And the function which was triggered “addData()” that first take the values from field using {document.getElementById(‘id’).value} and then store these values into localStorage using array();

Bây giờ chúng ta có thể dễ dàng tạo một bảng bằng cách sử dụng bên trong bên trong và nơi chúng ta có thể hiển thị dữ liệu lưu trữ trong LocalStorage. Ở đây một số mã hiển thị bảng trên một trang khác.localStorage. Here some code that display table on another page.

Đầu tiên chúng ta cần khởi tạo một bảng cung cấp cho ID ID của bảng.

    
        
Name
        
Class
        
Sub_Class
        
Infra_Class
        
Weight
        
Living_Period
        
Living_Place
        
Living_In_Groups
    

Trên HTML chỉ hiển thị một tiêu đề của bảng tương tự như thế này,

Dưới đây là phần còn lại của mã.

$(document).ready(function(){
    var arr1 = new Array();
    arr1 = JSON.parse(localStorage.getItem("localData"));
    var tbl = document.getElementById('animal');
    for(i = 0; i < arr1.length; i++){
        var r = tbl.insertRow();
        var cell1 = r.insertCell();
        var cell2 = r.insertCell();
        var cell3 = r.insertCell();
        var cell4 = r.insertCell();
        var cell5 = r.insertCell();
        var cell6 = r.insertCell();
        var cell7 = r.insertCell();
        var cell8 = r.insertCell();
        cell1.innerHTML = arr1[i].name;
        cell2.innerHTML = arr1[i].animal_class;
        cell3.innerHTML = arr1[i].sub_class;
        cell4.innerHTML = arr1[i].infra_class;
        cell5.innerHTML = arr1[i].weight;
        cell6.innerHTML = arr1[i].living_period;
        cell7.innerHTML = arr1[i].living_place;
        cell8.innerHTML = arr1[i].living_in_groups;
    }
});

Trong đó $ (tài liệu) .readeady (function () {.. .$(document).ready(function(){…..}) occurs when the web page is loaded, commonly this function is used when there is no sign of action in the html, this function is more simple and easy than addEventListener.

Bây giờ chúng tôi đã tạo thành công một bảng và liệt kê dữ liệu bằng cách sử dụng LocalStorage.

Làm cách nào để lưu trữ đầu vào trong lưu trữ cục bộ?

Làm thế nào JavaScript lưu trữ dữ liệu cục bộ?

Làm cách nào để lưu một biểu mẫu trong LocalStorage?

JavaScript có thể truy cập lưu trữ cục bộ không?