数据保存: 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" οnchange="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);
}