Javascript 在网页上本地存储用户输入的数据的最佳方式是什么？_Javascript_Html_Storage

Javascript 在网页上本地存储用户输入的数据的最佳方式是什么？

javascript html

Javascript 在网页上本地存储用户输入的数据的最佳方式是什么？,javascript,html,storage,Javascript,Html,Storage,我正在开发一个web应用程序，它基本上允许用户输入有关产品的数据，然后将其添加到表格中的网页中。我想将此信息保存在某种文件中（目前仅在我的计算机上本地保存），以便用户可以打开他或她以前创建的条目这是html页面的精简版本： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div&g

我正在开发一个web应用程序，它基本上允许用户输入有关产品的数据，然后将其添加到表格中的网页中。我想将此信息保存在某种文件中（目前仅在我的计算机上本地保存），以便用户可以打开他或她以前创建的条目

这是html页面的精简版本：

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">


</head>
<body>
    <div>
        <table id="itemsTable">
            <tr>
                <th>Date Added</th>
                <th>Item Description</th>
            </tr>
            </table>

    </div>
     <div id="itemInput">

         <h3>Add Item</h3>
             Date Added:<input type="date" id="dateAdded">
        Description:<input type="text" id="description">
<input type="button" value="Add Row" onclick="addRowFunction();">
<input type="button" value="Delete Selected" onclick="deleteRowFunction();">        
     </div>
</html>

您是否查看了

窗口中的localStorage

？这在现代浏览器中使用，允许您存储对象的字符串表示形式

如果您没有存储太多数据，则可以使用，但可能是更好的选择，它具有更高的默认存储限制，并允许您以更结构化的方式存储数据。IndexedDB允许您存储对象和任何其他可由克隆的对象，而无需手动对其进行序列化/反序列化（localStorage只能存储字符串）

IndexedDB有点复杂，使用起来会很痛苦，使用抽象层可能是个好主意。是一个相当受欢迎的库，为您提供详细信息。它使用IndexedDB（或其他类似技术，具体取决于当前浏览器支持什么），并为您提供了一个更好的API。使用PockDB的一个好处是，如果您最终在服务器上使用CouchDB，PockDB实际上可以与之同步。

我建议使用或

如果涉及的数据操作非常有限，localStorage将非常有用。（CRUD操作可以很容易地完成），但是如果您有更复杂的操作，请使用indexedDb

您在服务器上使用了什么？具体是什么？现在我只是在我的电脑上测试它。这真的是我为自己制作的工具。有可能我最终会将它公开，但现在它真的只适合我。多一点信息会有所帮助。您现有的JavaScript看起来像什么？服务器可以是您的计算机。拥有服务器端的东西并不意味着它是公开的。但问题是，如果要将数据存储在一个文件中，就不能直接从JavaScript浏览器中执行此操作。如果您想将其存储在浏览器中（正如其他人所建议的），则它仅限于该浏览器以及浏览器为您设置的任何大小限制。理解你要做的事情会有所帮助。是的，找一本关于服务器端语言的书，这正是你需要的。我个人不喜欢PHP，但有很多选择。如果您熟悉JS，那么Dart或Node可能是您的一个选择，尽管无论您如何分割它都有学习曲线。如果我使用localStorage，我可以使用它来存储对象或对象数组吗？本地存储有哪些限制？从代码中可以看出，我需要能够保存每个条目，我可以稍后返回并对其进行更改（即：将其标记为已售出、丢失或其他）。

//Striped-down object
function Item (dateListed, description) {
    this.dateListed = dateListed;
    this.description = description;

}

//Simple function to take data from form, create object, add to table.
function addItem() {
    var dateAdded = document.getElementById('dateAdded').value;
    var description = document.getElementById('description').value;

    // I realize that using an object in this striped-down version is kind of 
    // unnecessary, but in the full code it makes more sense.    
    var newItem = new Item(dateAdded, description);

    table = document.getElementById('itemsTable');
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    cell1.innerHTML = newItem.dateListed;
    cell2.innerHTML = newItem.description;
}