在本地存储中保存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()
}

本地存储是要走的路吗？我知道会话存储仅存储会话。

Answer 1

这是一种从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;
});

Answer 2

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

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

使用节点的基本 Ajax 发送/接收.js

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

编辑

这是一个关于本地存储的小教程

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

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

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

Answer 3

您是否正在尝试将.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);
}

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

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);