javascript - localStorage + jQuery 自动保存和加载 p-6ren

javascript - localStorage + jQuery 自动保存和加载 p

转载作者：行者123 更新时间：2023-11-30 20:20:32

25

4

我有一个代码:

$(document).ready(function() {
    var count = 1;

    $("button").click(function() {
        var inputVal = $('input').val();
        $('div').append("<p>"+ inputVal +"</p>");
        localStorage.setItem('pvalue'+count, inputVal);
        $("input").replaceWith("<input id='num_" + count++ +"'/>");
    })

    var local = localStorage.getItem("pvalue"+ count);
    $('div').append("<p>"+ local +"</p>");

})

此代码保存输入的所有值，但只显示第一个。我不知道如何在刷新后显示所有保存的 p 标签，有人可以帮助我吗？

HTML:

<body>
    <div class='mt-5 text-center'>
        <input> <button>Add</button>
    </div>

    <script src='script.js'></script>
</body>

最佳答案

问题是由于您使用了 count 变量。这在设置数据时很好，但是在重新加载它时 count 将设置回 1 并且您不会明确知道您保存了多少条目。

一个更好的主意是在 localStorage 中存储一个数组，您可以轻松地对其进行添加和检索。试试这个:

$(document).ready(function() {
  $("button").click(function() {    
    var inputVal = $('input').val();
    $('div').append("<p>" + inputVal + "</p>");    

    var pValues = JSON.parse(localStorage.getItem('pvalue')) || [];
    pValues.push(inputVal);
    localStorage.setItem('pvalue', JSON.stringify(pValues));
  })

  var pValues = JSON.parse(localStorage.getItem('pvalue')) || [];
  var html = pValues.map(function(local) {
    return '<p>' + local + '</p>';
  }).join('');
  $('div').append(html);
})

关于javascript - localStorage + jQuery 自动保存和加载 p，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51496118/

25

4

0

文章推荐： c - 结构体元素的初始化

文章推荐： c# - 需要交换具体类时的依赖注入(inject) C#

文章推荐： c++ - 当Visual Studio 2017从github源构建时，c1083错误

文章推荐： c# - 通用 IList 的 "type"是什么？

javascript - javascript localstorage 和 Angular localstorage($localstorage) 之间的区别？
我是 Angular 新手。使用 $localstorage(ngStorage) 是否有任何特定的原因而不是常规的 javascript localstorage 有什么区别。谁能给我解释一下吗？
javascript - 使用 : localStorage(), window.localStorage() 或 document.localStorage() 哪个更好？
这个问题说明了一切。我意识到所有选项都可以在最新的浏览器中使用，但是语义上最好的选择是什么？为什么？最佳答案根据 W3C 标准，正确的是 window.localStorage，因为 localS
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
javascript - localStorage.getItem ('item' ) 是否优于 localStorage.item 或 localStorage ['item' ]？
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage.getItem ('item' ) 是否优于 localStorage.item 或 localStorage ['item' ]？
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage.getItem ('item' ) 比 localStorage.item 或 localStorage ['item' ] 更好吗？
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage 项与其他 localStorage 项冲突
我在将本地存储的定价添加到其他字段时遇到问题。如果我将 beforeNoonNPSlot 的价格设置为 2，但我将 matineeNPSlot 的字段留空(它应该保留分配给的任何价格)最后)。然后在我
javascript - 从 localStorage 对象变量中删除对象键而不从 localStorage 中删除
我需要从 localStorage 对象变量中删除对象键而不从 localStorage 中删除键 let obj = localStorage; let keys = Object.keys(loc
javascript - 将 localStorage 设置为现有的 localStorage 变量
根据我所读到的内容，我希望以下代码能够工作。此代码是函数的一部分，该函数应该通过用下一个更高的 localStorage 变量覆盖它来删除 localStorage 变量。一旦没有更多内容可供复制，
javascript - localStorage ["something"] vs localStorage.something
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: JavaScript property access: dot notation vs. brackets? 我是
javascript - localStorage.property 与 localStorage ['property' ]
编写localStorage['key'] = value或localStorage.setItem('key', value)有区别吗？我看到了this question标记为重复，但在开发人员工
javascript - : window. localStorage 和 localStorage 有什么区别吗？
我一直在做以下事情: var store = window.localStorage; store.setItem() 但现在我看到代码是这样做的: localStorage.setItem() 两者
jquery - 未捕获的 Backbone.localStorage : Environment does not support localStorage.
我在 Chrome 上遇到此错误。不知道为什么会发生。任何帮助!我正在使用 Backbone.localStorage 插件和 Backbone。我在以下行中收到错误: localStorage: B
javascript - 如何使用 Backbone.LocalStorage 在 localStorage 中存储值
如果我尝试以下代码: var c = new Backbone.Collection(); c.localStorage = new Backbone.LocalStorage("items");
javascript - 为什么我的 localStorage.setItem() 和 localStorage.getItem() 没有存储值？
我想使用 localStorage 存储用户输入值，然后在倒计时器中使用该值。这是用户输入数据的 HTML: Work Time
javascript - window.localStorage.setItem 和 localStorage.setItem 之间应该有什么区别吗？
我有一个适用于 Mac 和 Linux 用户但不适用于 Windows 用户的 Chrome 扩展程序。当我进入控制台并在 localStorage 中设置一个项目时，它工作正常，但是当用户尝试使用扩
javascript - In IE10 ('localStorage' in window) condition is true but localStorage is undefined?
在这里浏览所有问题/答案，但找不到解决我的问题的方法。条件('localStorage' in window)返回 true但是 localStorage 的对象本身仍然是 undefined . 设
javascript - localstorage 在 localstorage[key] += 1 上返回 11
使用下面的代码，我创建一个 localstorage 变量，如果未定义，则其键为 quote = 1。然而，当最终使用相同的引号键再次调用它时，即使使用了 Number() 函数，它也会变成 11 而
javascript - 为什么 localStorage ["..."] 未定义，但 localStorage.getItem ("...") 为空？
我上次检查时，以下两行返回 true: null == localStorage["foo"]; null == localStorage.getItem("foo"); 将 null 替换为 und
next.js - 静态 NextJS 站点中的 localStorage : ReferenceError: localStorage is not defined
我正在尝试在 NextJS 静态站点上使用 localStorage，但遇到 localStorage 未定义错误。我的错误显示组件的代码是: export default function Cat

首页

博学

6Ren·AI

商城

javascript - localStorage + jQuery 自动保存和加载 p