Web Storsge - 本地客户端存储数据功能

• 代替Cookies在客户端保存用户名等一些简单的用户信息
• Cookies

  缺点：
  • 大小限制在4KB
  • 带宽浪费
  • 难以操作

---

sessionStorage - 临时保存

把数据存储在session对象之中，session就是打开网站到关闭网站之间要求进行保存的数据

• 保存数据方法：

  2

  种
  • sessionStorage.setItem('key', 'value');
  • sessionStorage.key('value');
• 读取数据方法：

  2

  种
  • str = sessionStorage.getItem('key');
  • str = sessionStorage.key(index);

<<webstorage.js>>

function saveStorage(id) {    var str = document.getElementById(id).value; // 通过str来读取input输入的值    sessionStorage.setItem("name", str); // 通过方法存入sessionStorage}function readStorage(id) {    var target = document.getElementById(id);    var msg = sessionStorage.getItem("name"); // 读取sessionStorage的name值    target.innerHTML = msg;}

<<index.html>>

 

---

localStorage - 永久保存

信息存储在客户端本地，关闭网页后再次打开信息也存在

• 保存数据的方法：
  • localStorage.setItem('key', 'value');
  • localStorage.key('value');
• 读取数据的方法
  • str = localStorage.getItem('key');
  • str = localStorage.key(index); // 通过索引号

<<webstorage.js>>

function saveStorage(id) {    var str = document.getElementById(id).value; // 通过str来读取input输入的值    localStorage.setItem("name", str); // 通过方法存入sessionStorage}function readStorage(id) {    var target = document.getElementById(id);    var msg = localStorage.getItem("name"); // 读取sessionStorage的name值    target.innerHTML = msg;}

 

---

简单的留言板

要求：在留言板中将留言时间与内容相匹配，具有保存、清除、读取功能

<<webstorage.js>>

// 保存数据function saveStorage(id) {    var target = document.getElementById(id);    var str = target.value;    var time = new Date().getTime(); // 读取到毫秒数    localStorage.setItem(time, str);    loadStorage('msg'); // 保存的时候即显示    target.value = "";}// 加载数据function loadStorage(id) {    var newElem = "
     
      "; // 定义新DOM元素table    for (var i = 0; i < localStorage.length; i++) {        var loadTime = localStorage.key(i); // 通过索引获取key        var loadMsg = localStorage.getItem(loadTime); // 通过时间获取留言信息        var oTime = new Date(); // 创建Date对象        oTime.setTime(loadTime); // 将loadTime转换为时间对象        var strTime = oTime.toUTCString(); // 将时间对象字符串化        newElem += "
"; // 在table中加上该行信息    }    newElem += "
      
       
        
" + (i + 1) + "
        
" + loadMsg + "
        
" + strTime + "
       
      
     
"; // 给table闭合    var target = document.getElementById(id);    target.innerHTML = newElem;}// 清除数据function clearStorage(id) {    localStorage.clear(); // 清除loaclStorage    loadStorage('msg');}

<<index.html>>

            
留言板