如何使用 javascript 而不是 Django 会话将表单数据（Django 表单）存储到浏览器的本地存储？

Posted 2023-02-24

【中文标题】如何使用 javascript 而不是 Django 会话将表单数据（Django 表单）存储到浏览器的本地存储？

【英文标题】：How to store Form Data (a Django form) to browser's local storage, using javascript and not Django sessions?

【发布时间】：2017-02-12 03:29:35

【问题描述】：

我想通过表单（Django 表单）从用户那里获取数据，并将其存储在浏览器的本地存储中，使用 javascript 并且不使用 Django 会话。

我的代码如下：

./forms.py :

class digitize(forms.Form):

    medicinename = forms.CharField(label='Medicinename', max_length=100)
    quantity = forms.CharField(label='Quantity', max_length=100)

./e_commerce.html：

<form id="digitizer_form" role="form" action="/MediciansDigitizer/Presc/" method="post" enctype="multipart/form-data">

   % csrf_token %

   <h3 class="prod_title">Add Detail</h3>

   iform.as_table dform.as_p 

   <div class="">
   <button type="Submit" class="btn btn-default btn-lg">Digitize</button>
   </div>

</form> 

<script>

        window.onload = function() 

        // Check for LocalStorage support.
        if (localStorage) 

            // Add an event listener for form submissions
            document.getElementById('digitizer_form').addEventListener('submit', function() 

            // Get the value of the MedicineName field :

Now, this is where I need help. Here I want to give in the 'MedicineName' 
field of the form defined above, So that
I can get the MedicineName entered by the user from the form
and store it in the browser storage. 
The logic should look something like this:

            // get the value of the MedicineName so that
               I can store it in a variable like this:

             var Medicine = document.getElementById('MedicineName').value; 

//but because I am using a django form, and linking it 
  in the e_commerce.html template through %csrf_token% ,
  iform.as_table and  dform.as_p  
  and have not assigned any id ('MedicineName') to any element (as 
  I didn't create any form element manually inside the html template, 
but has made a "form class" in forms.py), I can't follow
  this approach and so I am stuck here because I don't know how to 
  do it the other way round.

            // and then Save the variable in localStorage
              like this :
            localStorage.setItem('Medicine', MedicineName);
            );

          

        
</script>

那么，如何使用用户从html模板中javascript里面的Django表单输入的MedicineName，通过javascript将名称存储在我浏览器的本地存储中呢？

如果有人能帮助我解决这个问题，我们将不胜感激。提前致谢！

【问题讨论】：

顺便说一句：如果没有定义，if (localStorage) 不会给出参考错误吗？相比if (window.localStorage)...

@nnnnnn 好的，那我应该如何定义它呢？我的意思是应该以什么方式包含它以便我可以使用 localStorage？

这真的和 django 没有任何关系吗？

我使用术语 Django 来表示表单是从 django 表单类制作的。所以基本上我不知道如何在我的html模板@e4c5

中的

请解释一下 django 表单变量的确切含义。当一个 django 表单被渲染时，它变成了可以通过 javascript 访问的普通旧 HTML，就像任何其他 html 组件一样

【参考方案1】：

你的表单渲染有错误

<form id="digitizer_form" role="form" action="/MediciansDigitizer/Presc/" method="post" enctype="multipart/form-data">

   % csrf_token %

   <h3 class="prod_title">Add Detail</h3>

   iform.as_table

   <div class="">
   <button type="Submit" class="btn btn-default btn-lg">Digitize</button>
   </div>

</form> 

<form id="other_form" role="form" method="post" >

    dform.as_p 

   <div class="">
   <button type="Submit" class="btn btn-default btn-lg">Digitize</button>
   </div>

</form> 

这是两种形式，因此它们应该呈现为两种不同的形式。否则，您会发现服务器端表单验证不起作用。如果您需要一个 HTML 表单，其中包含来自两个 django 表单的字段，请让一个 django 表单扩展另一个表单。

然后，由于您有一个名为 medicinename 的表单元素，因此该表单将生成一个 ID 为 id_medicinename 的 HTML 输入元素，因此您可以将其访问为

 document.getElementById('id_medicinename').value

【讨论】：

非常感谢您的回答。这正是我想要的。我会对其进行测试，看看它是否有效，因此很快就会接受您的回答。 :)

太好了，告诉我进展如何

哦！既然你接受了，我认为它已经奏效了 :-) 对你的项目一切顺利