如何使用 jQuery 和 Web Storage API 制作自动填充表单？

Web Storage API 提供了一种机制，浏览器可以通过这些机制以比使用 cookie 更直观的方式存储键/值对。 Web Storage 中的两种机制是 sessionStorage 和 localStorage，session 只为一个 session 存储数据，直到浏览器关闭，local storage 做同样的事情，但即使浏览器关闭和重新打开也仍然存在，因此建议使用 local storage用于自动填写表格。

现在开发人员有两种可能的方法来创建自动填充表单。

1. 使用本地存储的固定数据
2. 使用动态存储的数据

注意：动态存储的数据是根据用户的输入（如表单提交）不时更新的数据。

方法 1：使用 window.localStorage.setItem(key, value)将数据本地存储在浏览器上，然后在脚本标记中提取并用于自动填充表单。

示例：让我们假设输入字段“国家/地区”的情况，需要使用 HTML localStorage属性自动填充国家/地区字段。以下代码实现以给定形式获取和自动完成国家/地区的字段。

HTML

  

    
    
    
    
  
    
  
        // Ready function runs everytime the page load
        $(document).ready(function() {
  
            // Set local storage      
            var Countries = [
                "Afghanistan", "Albania", "Algeria",
                "Armenia", "Australia", "Bahrain", 
                "Bangladesh", "Belgium", "Bhutan", 
                "Brazil", "Canada", "Chile", "China", 
                "Denmark", "Djibouti", "Egypt", 
                "Estonia", "Ethiopia", "Finland", 
                "France", "Germany", "Ghana", "Greece",
                "Greenland", "Hong Kong", "Hungary", 
                "Iceland", "India", "Indonesia", "Iran",
                "Iraq", "Ireland", "Israel", "Italy", 
                "Japan", "Jersey", "Jordan", "Kazakhstan",
                "Kuwait", "Kyrgyzstan", "Lebanon", 
                "Malaysia", "Maldives", "Mexico", "Nepal", 
                "Netherlands", "New Zealand", "North Korea",
                "Pakistan", "Palestine", "Philippines", 
                "Poland", "Qatar", "Russia", "Saudi Arabia",
                "Singapore", "South Africa", "Swaziland", 
                "Taiwan", "Thailand", "Turkey", 
                "United Kingdom", "United States of America",
                "Uruguay", "Vietnam", "Yemen", "Zimbabwe"
            ];
  
            // Fetch locally stored Countries
            var Countries = window.localStorage.getItem("Countries");
              
            // Convert it to a javascript object
            Countries = JSON.parse(Countries);
  
            // Fetch Country input tag and use JQuery 
            // autocomplete function
            $("#country_input").autocomplete({
  
                // Pass javascript object to 
                // autocomplete function
                source: Countries,
                autofocus: true,
            });
  
            // To clear local storage when clear
            // button is clicked 
            $("#clear").click(function(event) {
                localStorage.clear();
            });
        });
    

  

    GeeksforGeeks
    Autofilling forms 
  
    
        Enter Country
        
        Submit
        Clear Local
    

  

输出：这种方法的一个缺点是需要一次在本地存储各种数据，这会消耗内存，而且大部分数据可能永远不会被使用。在这种情况下，动态存储数据有助于频繁存储值，从而减少内存以及无法预定义值的情况。

自动填充功能

方法 2：在这种方法中，开发人员将输入表单字段数据存储在本地，并为每个表单提交更新本地存储的值。在此过程中，会检查重复条目并仅存储一次。开发人员可以选择本地存储中应该存在的值的数量。

例子：

HTML

  

    
    
    
    
  
    
        // This function runs everytime the page load
        $(document).ready(function() {
  
            var Countries = [
                "Afghanistan", "Albania", "Algeria",
                "Armenia", "Australia", "Bahrain", 
                "Bangladesh", "Belgium", "Bhutan", 
                "Brazil", "Canada", "Chile", "China", 
                "Denmark", "Djibouti", "Egypt", 
                "Estonia", "Ethiopia", "Finland", 
                "France", "Germany", "Ghana", "Greece",
                "Greenland", "Hong Kong", "Hungary", 
                "Iceland", "India", "Indonesia", "Iran",
                "Iraq", "Ireland", "Israel", "Italy", 
                "Japan", "Jersey", "Jordan", "Kazakhstan",
                "Kuwait", "Kyrgyzstan", "Lebanon", 
                "Malaysia", "Maldives", "Mexico", "Nepal", 
                "Netherlands", "New Zealand", "North Korea",
                "Pakistan", "Palestine", "Philippines", 
                "Poland", "Qatar", "Russia", "Saudi Arabia",
                "Singapore", "South Africa", "Swaziland", 
                "Taiwan", "Thailand", "Turkey", 
                "United Kingdom", "United States of America",
                "Uruguay", "Vietnam", "Yemen", "Zimbabwe"
            ];
  
            // Fetch locally stored Countries
            var Countries = window.localStorage.getItem("Countries");
  
            // If countries is not available assign empty array []
            // else assign JavaScript object
            Countries = Countries === null ? [] : JSON.parse(Countries);
  
            // Fetch Country input tag and use jQuery 
            // autocomplete function
            $("#country_input").autocomplete({
  
                // Pass JavaScript object to 
                // autocomplete function
                source: Countries,
                autofocus: true,
            });
  
            // Form submission event function
            $("form").submit(function(event) {
  
                // Prevent form submission until
                // code execution
                event.preventDefault;
  
                // Fetch input field value
                var currentCountry = $("#country_input").val();
  
                // Store it on the top of the Countries
                // array at index 0
                Countries.unshift(currentCountry);
  
                // Remove the duplicate entries
                for (var i = 1; i < Countries.length; i++) {
  
                    // Countries[0] stores current input field
                    if (Countries[0] === Countries[i]) {
                        Countries.splice(i, 1);
                    }
                }
  
                // Stores only the last 10 searches
                // Developer can choose the number of 
                // entries to be stored          
                if (i === Countries.length && Countries.length > 10) {
                    Countries.pop();
                }
  
                // Stores the new list into the local 
                // storage overwriting the previous one
                window.localStorage.setItem("Countries", 
                    JSON.stringify(Countries));
  
                // Submit the form
                event.submit;
            });
  
            // To clear local storage when clear
            // button is clicked
            $("#clear").click(function(event) {
                localStorage.clear();
            });
        });
    

  

    GeeksforGeeks
    Autocomplete filling
  
    
  
    
        Enter Country
        
        Submit
        Clear Local
    

  

输出：

自动完成