HTML5-桌面式web应用-数据存储

数据保存： 1，服务器： 安全， 可靠， 高效

2， 客户端： 不太重要的信息； 用户偏好和应用状态放在用户本地比较合乎逻辑； cookie， local storage 本体存储功能（HTML5支持），

web存储简介：（一般小于5M的 数据）

本地存储： 对应localStorage对象， 用于长期保存整个网站的数据， 数据长期存在， 即使用户推出浏览器也会存在的。

会话存储： 这类存储针对一个窗口/标签页的数据， 推出就失效了！

键值对保存数据；

localStorage[keyName] = data;

localStorage["username"] = "Mark jack";

alert("you stored: " + localStorage["userage"];

localStorage.removeItem("username");

localStorage.clear();

sessionStorage["username"] = "Mark jack";

alert("you stored: " + sessionStorage["userage"];

sessionStorage.removeItem("username");

sessionStorage.clear();

function findAllItems() {

var itemList = document.getElementById("itemList");

itemlist.innerHTML = "";

for (var i=0; i<localStorage.length; i++) {

var key = localStorage.key(i);

var item = localStorage[key];

var newItem = document.createElement("li");

newItem.innerHTML = key + ": " + item;

itemList.appendChild(newItem);

}

}

indexDB， 起始大小就是50MB了！！！！ 用户还可以扩展。

保存对象：

JSON； javascript Object Notation ， javascript 对象表示法；

var score = new PersonalityScore(o, c ,e, a, n);

sessionStore["PersonalityScore"] = JSON.stringify(score);

var score = JSON.parse(sessionStorage["PersonalityScore"]);

响应存储变化：

windows.onload = function() {

window.addEventListener("storage", storageChanged, false);

}

function storageChanged(e) {

var message = document.getElementById("updateMessage");

var mykey = e.key;

var myOldValue = e.oldValue;

var myNewValue = e.newValue;

}

读取文件：

File API ： 只是规定了 怎么从硬盘读取文件， 直接交给网页中的javascript代码， 然后代码 可以打开文件 探究数据， 无论是文本文件 还是 其他文件。

注意： 1， 关键在于文件会被直接交给javascript代码， 与以往的上传不一样， File API不是为了向服务器提交文件设计的！！！！！！！！！！！！！

2， 他不能修改文件， 也不能创建文件；
http://www.w3.org/TR/FileAPI
XMLHttpRequest： 可以通过XHR来保存数据到服务器上面。

取得文件：

1， 使用<input>元素， 将其type属性设置为file；

2， 隐藏的<input> 元素，

3， 拖放。

读取文本文件：

<input id=”fileinput" type="file" onchange="processFiles(this.files)">

var file = files[0];

var reader = new FileReader();

reader.onload = function(e) {

var output = document.getElementById("fileOutput");

output.textContext = e.target.result;

}

reader.readAsText(file);

}