Windows Universal App Javascript保存文件

时间:2017-02-15 20:08:46

标签: javascript visual-studio win-universal-app windows-10-universal

我尝试制作应用但我有一个问题。如何保存文件或进度?如果用户在应用程序中输入了一些信息或更改了布局如何将其保存在通用JavaScript应用程序中?现在,如果我关闭应用程序并再次打开它没有保存任何内容

我已经发现了以下但仍然没有得到它 https://msdn.microsoft.com/en-us/library/windows/apps/br212883.aspx

所以主要问题是如何使用javascript创建通用应用程序并保存用户所做的更改

App image

编辑:有我的应用程序的图片。我还添加了html代码和javascript

HTML:

<div id="myDIV" class="header">
    <h2 style="margin:5px">My To Do List</h2>
    <input type="text" id="myInput" placeholder="Title...">
    <span id ="addtask" onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL">
    <li class="checked">Example checked</li>
    <li>Example not checked</li>
</ul>

JS:

var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myNodelist[i].appendChild(span);
}


var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
        var div = this.parentElement;
        div.style.display = "none";
    }
}


var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
    if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('checked');
    }
}, false);


var addlist = document.getElementById("addtask");
addlist.addEventListener("click", newElement, false);

function newElement() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL").appendChild(li);
    }
    document.getElementById("myInput").value = "";

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

1 个答案:

答案 0 :(得分:0)

  

如何保存文件或进度

如果您只想创建文件并将数据保存到文件,请参考this document。并且有一个文件操作相对official sample用javascript编写,你可以参考。

但在我看来,您的要求看起来更像是您想要一个数据库。数据库可以保存用户更改的数据,应用程序还可以从数据库中读取数据,以显示在应用程序的一个页面上。因此,您可能需要在应用程序上使用SQLite数据库。有关如何操作的详细信息可以参考this document。请注意,建议您使用本地数据库,以便使用服务器考虑漫游数据。

如果您只想在本地设备中保存简单用户数据,您还可以考虑将xml文件用作小型数据库并将其存储在local文件夹中。保存和读取xml文件中的数据更改。有关如何读取和保存xml文件数据的详细信息,可以参考this javascript official sample

例如,您可以将xml内容保存为用户数据,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<myNodelist>
  <li>
    <Text>The first to do item</Text>
    <span class="close">×</span>
  </li>
  <li>
    <Text>The second to do item</Text>
    <span class="close">×</span>
  </li>
  <li>
    <Text>Read a book</Text>
    <span class="close">×</span>
  </li>
</myNodelist>

阅读myNodelist以显示数据,插入新的li节点以添加新记录。