time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5初探本地存储Web Storage与本地数据库

HTML5初探本地存储Web Storage与本地数据库

时间:2013-05-03 00:43 点击:2642次 字体:[ ]




前言

本章主要内容是Web Storage与本地数据库,其中Web Storage 是对cookie的优化,本地数据库是HTML5新增的一个功能,使用它可以在客户端建立一个数据库

大大减轻服务器端的负担,加快访问数据速度。

学习本章需要掌握Web Storage基本概念,了解sessionStorage与localStorage的使用与差别

掌握本地数据库的使用

什么是WebStorage?

前面说过,webstorage是对cookie的优化而来,HTML4中使用cookie在客户端存储用户数据,长期使用发现存在以下问题:

大小限制在4kb
cookie每次随HTTP事务一起发送,浪费带宽
正确操作cookie很复杂(这个有待考虑)

由于以上问题,HTML5提出WebStorage作为新的客户端本地保存技术。

Web Storage 技术在web上存储数据即针对客户端本地;具体来说分为两种:
sessionStrage:
session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长。

localStorage:
将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。

两者区别就是一个作为临时保存,一个拥有长期保存。

使用示例

  1. 简单应用  
  2.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.  <head> 
  5.      <title></title> 
  6.  </head> 
  7.  <body> 
  8.      <h1> 
  9.          Web Storage 实验</h1> 
  10.      <div id="msg" style=" margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;"> 
  11.      </div> 
  12.      <input type="text" id="text" /> 
  13.      <select id="type"> 
  14.          <option value="session">sessionStorage</option> 
  15.          <option value="local">localStorage</option> 
  16.      </select> 
  17.      <button onclick="save();"> 
  18.          保存数据</button> 
  19.      <button onclick="load();"> 
  20.          读取数据</button> 
  21.      <script type="text/javascript"> 
  22.          var msg = document.getElementById('msg'),  
  23.              text = document.getElementById('text'),  
  24.              type = document.getElementById('type');  
  25.    
  26.          function save() {  
  27.              var str = text.value;  
  28.              var t = type.value;  
  29.              if (t == 'session') {  
  30.                  sessionStorage.setItem('msg', str);  
  31.              } else {  
  32.                  localStorage.setItem('msg', str);  
  33.              }  
  34.          }  
  35.    
  36.          function load() {  
  37.              var t = type.value;  
  38.              if (t == 'session') {  
  39.                  msg.innerHTML = sessionStorage.getItem('msg');  
  40.              } else {  
  41.                  msg.innerHTML = localStorage.getItem('msg');  
  42.              }  
  43.          }  
  44.        
  45.      </script> 
  46.  </body> 
  47.  </html> 



本文地址 : http://www.fengfly.com/plus/view-212670-1.html
标签: HTML5 本地存储 本地数据库 web storage
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: