📌  相关文章
📜  如何使用 jQuery 和 Web Storage API 制作自动填充表单?

📅  最后修改于: 2021-11-25 03:19:20             🧑  作者: Mango

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


  

    
    
  
    

  

    

GeeksforGeeks

    Autofilling forms        
                                        
  


HTML


  

    
    
  
    

  

    

GeeksforGeeks

    Autocomplete filling        

       
                                        
  


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

自动填充功能

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

例子:

HTML



  

    
    
  
    

  

    

GeeksforGeeks

    Autocomplete filling        

       
                                        
  

输出:

自动完成