星空网 > 软件开发 > 网页设计

HTML5 Web Storage

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

<!DOCTYPE html><html><head></head><body>  <input type="text" id="txt">  <input type="button" value="保存数据" onclick="saveStorage('txt');">  <input type="button" value="读取数据" onclick="readStorage('msg');">  <p id="msg"></p></body><script type="text/javascript" src='/images/loading.gif' data-original="webstorage.js"></script></html>

HTML5  Web Storage

————————————————————————————————————————————

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

HTML5  Web Storage

————————————————————————————————————————————

简单的留言板

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

HTML5  Web Storage

<<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 = "<table>"; // 定义新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 += "<tr><td>" + (i + 1) + "</td><td>" + loadMsg + "</td><td>" + strTime + "</tr></td>"; // 在table中加上该行信息  }  newElem += "</table>"; // 给table闭合  var target = document.getElementById(id);  target.innerHTML = newElem;}// 清除数据function clearStorage(id) {  localStorage.clear(); // 清除loaclStorage  loadStorage('msg');}

<<index.html>>

<!DOCTYPE html><html><head>  <script type="text/javascript" src='/images/loading.gif' data-original="webstorage.js"></script>  <style type="text/css">  #txt {    width: 300px;    height: 100px;  }  #msg table tr td {    border-top: 1px black solid;  }  </style></head><body>  <h1>留言板</h1>  <textarea id="txt" cols="60" rows="10"></textarea>  <br/>  <br/>  <input type="button" value="save" onclick="saveStorage('txt')" id="saveBtn">  <input type="button" value="clear" onclick="clearStorage('msg')" id="clearBtn">  <input type="button" value="load" onclick="loadStorage('msg')" id="loadBtn">  <hr/>  <div id="msg"></div></body></html>

HTML5  Web Storage




原标题:HTML5 Web Storage

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流