在本地存储中保存 javascript 数据的最佳方法

Question

我希望能够创建 JavaScript 笔记对象并使用导航栏窗格动态删除它们。

var sel = window.getSelection();
var range = sel.getRangeAt(0);
var editor = { "startContainer": range.startContainer, "startOffset": range.startOffset, "endContainer": range.endContainer, "endOffset": range.endOffset };

然后使用消息，我会将位置和消息传递给函数以添加注释：

Notes(editor, message);
function Notes(location, note) {
  this.location = location;
  this.note = note;
}

我正在努力思考如何在本地实际保存数据。

function addNote() {
  // if(tyepof(Storage) !== "undefined"){
  //   if(localStorage.notes){
  //     localStorage.notes
  //   } else {
  //     localStorage.notes = 
  //   }

  localStorage.setItem()
}

localStorage 是要走的路吗？我知道 sessionStorage 只存储会话。

Answer 1

您是否尝试将 .txt 文件本地保存到计算机？我不相信 JavaScript 有这个功能，因为这将是一个巨大的安全漏洞。我的理解是您可以在本地机器上创建 cookie 文件，但仅此而已。

如果您需要导出文件，您始终可以使用 ASP.NET/PHP 在服务器上创建文件，然后用户可以单击会提示您保存动态创建的文件的链接。

根据下面的评论，您应该创建一个对象数组。

var array = [];
array[array.length] = {name: 'NAME CONTENT', other: 'Other content', number: 1}
array[array.length] = {name: 'NAME CONTENT 2', other: 'Other content 2', number: 1}

然后您可以通过执行类似这样的操作来获得一个函数来处理您的对象

PrintInfo(array[i]);

function PrintInfo(aSingleObject){
    console.log(aSingleObject.name);
    console.log(aSingleObject.other);
    console.log(aSingleObject.number);
}

使用拼接命令从数组中删除对象

var array = [2, 5, 9];
console.log(array)
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
// array = [2, 9]
console.log(array);

Answer 2

你有很多方法可以做到这一点。事实上，要解释所有这些是不切实际的。这取决于你的实际意图。如果你只想要笔记，你可以放松，localStorage 可能是要走的路。

但对于大多数应用程序，您通常会将数据发送到负责存储数据的服务器。在服务器中，数据可以存储在数据库中，在本地文件中，有很多方法。 服务器可以是 Node.js（如果你只想坚持使用 js），或者任何其他具有服务器功能的语言。这实际上就是全部了。最常用的是 Node、PHP、Python、Java 等。 您将准备一个特定的 url 来接收包含需要保存的数据的帖子，然后让客户端使用它向该 url 发送 ajax 请求。 在这个问题中，您可以获得一些有关如何开始执行此操作的示例：

Basic Ajax send/receive with node.js

服务器保存部分由您决定 :)

编辑

这里有一个关于localStorage的小教程

https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

请记住，每次重新加载页面时，您都会丢失所有内容。为了保存数据，您必须将其发送到服务器。

另一件事：您不需要购买专用服务器来执行此操作。您可以在自己的机器上实现服务器。这是一项相对容易的任务。没那么复杂。我建议您在排除此问题之前先查看上面关于基本 ajax 发送/接收的 SO 问题。

Answer 3

这是一种从localStorage.getItem() 调用中生成一些元素的快速方法，并且可能还可以帮助您与 Nelson 的答案一起在这里。单击小提琴中的按钮，您将看到代码抓取 localStorage 对象并使用它们创建一些简单的<li>'s。

小提琴： http://jsfiddle.net/kfrvdnux/

示例代码：

HTML

<button id='save'>Click the save button...</button>
<div id='content'></div>

JS

var content = document.getElementById('content'),
    save    = document.getElementById('save'),
    output  = '<ul>',
    animals = [{
      name: 'bob',
      type: 'dog'
    }, {
      name: 'fred',
      type: 'lizard'
    }];

// set on load for testing
localStorage.setItem('animals', JSON.stringify(animals));

// grab localStorage data on click and create a list
save.addEventListener('click', function() {
    var ls = JSON.parse(localStorage.getItem('animals'));  
    for (var i = 0; i < ls.length; i++) {
      output += '<li>' + ls[i].name + ', ' + ls[i].type + '</li>';
    }

  output += '</ul>';
  content.innerHTML = output;
});