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

    }