Javascript 记住用户输入_Javascript_Google Chrome_Google Chrome Extension

Javascript 记住用户输入

javascript google-chrome google-chrome-extension

Javascript 记住用户输入,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我对javascript相当陌生，我正在尝试通过制作一个chrome扩展来自学我正在尝试做一个扩展，用户可以输入每天的活动。目前，我只有活动名称作为输入字段。这是一个非常简单的扩展；我正在努力进入发展阶段首先，用户在一周中的某一天单击七个按钮中的一个如果尚未设置活动名称，则会显示一条消息告知用户，并显示一个输入框。用户键入活动的名称，然后单击提交按钮。然后向用户显示用户输入的内容我的问题是，当我输入星期一的活动名称时，它工作正常-当我输入星期二时，星期一的活动丢失。即使我点击“星期一”按

我对javascript相当陌生，我正在尝试通过制作一个chrome扩展来自学

我正在尝试做一个扩展，用户可以输入每天的活动。目前，我只有活动名称作为输入字段。这是一个非常简单的扩展；我正在努力进入发展阶段

首先，用户在一周中的某一天单击七个按钮中的一个

如果尚未设置活动名称，则会显示一条消息告知用户，并显示一个输入框。用户键入活动的名称，然后单击提交按钮。然后向用户显示用户输入的内容

我的问题是，当我输入星期一的活动名称时，它工作正常-当我输入星期二时，星期一的活动丢失。即使我点击“星期一”按钮，也看不到那天输入的活动名称

有人知道我做错了什么，或者有什么建议吗？任何帮助都将不胜感激！还有一种方法可以使输入不会丢失吗？每当我点击扩展时，它就会将变量设置回初始设置

请，谢谢

My manifest.json文件：

{
"manifest_version": 2,
"name": "Activity... Thingy",
"version": "1.0",
"description": "My first Chrome extension.",



"browser_action": {  
"default_icon": "icon.png",
"default_popup": "popup.html"
  }
}

我的HTML文件：

<!DOCTYPE>
<html lang="en">
<head>

<style type="text/css">

  body {

    min-width: 560px;
    overflow-x: hidden; 
    font-family: Georgia;

  }

  .box {

    margin: 2px;
    padding: 10px;
    vertical-align: middle;
    width: 75px;
    height: 45px;
    text-align: center;
    background-color: #542437;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    float: left;
    border: 0px;
    font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;

  }

  .box:hover {

    background-color: #b34600;

  }

  .inputForms {

    display: none;

  }

</style>



</head>

<body>

<button class="box" id="Mon">Mon</button>
<button class="box" id="Tue">Tue</button>
<button class="box" id="Wed">Wed</button>
<button class="box" id="Thr">Thu</button>
<button class="box" id="Fri">Fri</button>
<button class="box" id="Sat">Sat</button>    
<button class="box" id="Sun">Sun</button>

<br /><br />
<br /><br />

<hr />

<p style="font-size: 1.5em;">Click a day of the week to view the current activities set!       </p>

<p id="demo"></p>


<form class="inputForms" id="inputForms">
  Activity Name:<br />
  <input type="text" name="activityName" id="userActivityName">
  <input type="button" name="submit" value="Submit" id="submitBtn">

</form>

<script src="popup.js"></script>

你需要什么要想做你想做的事，你需要使用

localStorage

，这是一个即使页面被重新加载也会在浏览器中保持记忆的对象（更多信息）。这将允许您始终存储“活动”，这样您就不会丢失它们

然后，您将使用一些基本逻辑使您的程序工作。基本行为将是：

您可以从

localStorage

加载以前设置的活动（如果有）

用户每天点击一次

检查当天的活动是否已设置

如果已设置，则输出“用于*dayname*的活动：…”
否则，您将：
输出短语“尚未为*dayname*设置任何活动”
显示表单，以便用户可以输入新活动
现在，用户单击submit按钮
将当天的活动保存在
```
localStorage
```
隐藏表单，并输出“用于*dayname*集的活动！”

存储方法在存储部分，您需要一个对象来存储活动，如下所示：

activities = {
    "Monday": "Some activity",
    "Tuesday": "Some other activity",
    ...
    // and so on        
}

由于localStorage
只存储字符串，而不存储对象，因此需要使用
JSON.stringify
将对象转换为字符串并保存，以及
JSON.parse
从
localStorage
中保存的字符串中获取对象
写一些更好的HTML 我注意到一些小东西可以在你的页面中更改，例如日期ID。这将允许以更简单的方式向用户显示全天名称（并以更可读的格式将其保存到localStorage）。以下是我所做的更改：

<button class="box" id="Monday">Mon</button> <button class="box" id="Tuesday">Tue</button> <button class="box" id="Wednesday">Wed</button> 
工作示例
我创建了这个扩展的一个工作示例，您可以找到
，这比我预期的要多得多！非常感谢。是的，为了让用户更清楚，我本可以做得更好，我在一个小时内编写了这个代码，所以我还没有花太多精力去设计。非常感谢您，我非常感谢，我将看一看Chrome。可以使用存储而不是本地存储，例如，如果您希望将输入同步到所有用户的Chrome实例，还可以存储对象。是否还有一种方法可以从本地存储/Chrome存储中删除变量？那么，如果用户想要重置本周的食谱？我尝试了几种不同的方法，创建了一个重置按钮，然后执行了：if（e.target==reset）{……}我尝试了localStorage.clear（）、localStorage.removietem（）等。我似乎无法使变量forgotten@sandi是的，要删除变量，只需使用
delete
。例如：
delete localStorage.activities
.Hmmm，它似乎不起作用。这正是我所做的。我添加了一个变量，设置为我创建的重置按钮的ID。然后我得到了代码：'if（e.target==reset）{delete localStorage.activities；demo.textContent='reset the activities！'；}'我知道事件正在发生，因为演示段落正在更改，但变量仍在记忆中。我已经重新加载了扩展
<button class="box" id="Monday">Mon</button> <button class="box" id="Tuesday">Tue</button> <button class="box" id="Wednesday">Wed</button> 

<input type="button" name="submit" value="Set activity" id="submitBtn" />

var days = document.getElementsByClassName('box'), // days buttons demo = document.getElementById('demo'), // text to display to the user form = document.getElementById('inputForms'), // form with the input and the button activityName = document.getElementById('userActivityName'),// activity input submit = document.getElementById('submitBtn'), // submit button activities = JSON.parse(localStorage.activities || "{}"),// activities object // ^ if this exists, use it, otherwise create a new empty object "{}" selectedDay = null; // selected day (at the beginning is null) document.documentElement.addEventListener('click', function(e) { for (var i=0, day; day = days[i]; i++) { // check if the clicked element is one of the days if (e.target == day) { // yes, it is one of the days if (!activities[day.id]) { // check the activity // the activity for that day has not been set demo.textContent = 'You have not set any activity for ' + day.id + ' yet!'; selectedDay = day.id; form.style.display = 'initial'; // output the string, display the form, and set the selected day } else { // the activity for that day has been set form.style.display = 'none'; demo.textContent = 'Activity for ' + day.id + ': ' + activities[day.id]; // output the string, and hide the form if it wasn't hidden } } } if (e.target == submit) { // check if the clicked element is the submit button activities[selectedDay] = activityName.value; // set the activity for the selected day localStorage.activities = JSON.stringify(activities); // save to localStorage demo.textContent = 'Activity set for ' + selectedDay + '!'; // output success string } });