1.webStorage是什么？

webStorage是html5中用于本地化存储的一种方式，而在之前呢我们是用cookie的存储方式处理;

2.那它们之间的区别是什么？

Ⅰ.cookie存在的问题：

ⅰ.cookie需要向服务端发送一个请求，服务端返回一个cookieId，存储用浏览器缓存里,需消耗一定的带宽。[cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量];

ⅱ.cookie存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K;

Ⅱ.而webstorage只需把数据存储于本地;

3.我们可以举一个小例子说明一下

eg:输入用户名和密码，点击按钮1时，把数据保存起来，点击按钮2，页面刷新还可以获取到；

过程：

ⅰ.创建一个事件

function MyClick1()

{

}

ⅱ.通过一个id获取到它的用户名

var username = $("#TxtUserName").val();

ⅲ.通过一个id获取到它的密码

var pwd = $("#TxtPwd").val();

ⅳ.用户名和密码获取到之后，我们要怎么存数据呢？有两种方式：

①. 第一种：sessionStorege,使用于Firefox2+的火狐浏览器;

生命周期：用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了[仅限当前页面]

缺点：IE不支持，不能实现数据的持久保存。

            sessionStorage.setItem("k_username", username);
            sessionStorage.setItem("k_pwd", pwd);

注：sessionStorage.setItem是通过键值对的方式存储;

②.第二种方式:localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。

生命周期：存于本地C盘，浏览器关闭打开之后还有;

缺点：低版本浏览器不支持。

            localStorage.setItem("k_username", username);

            localStorage.setItem("k_pwd",pwd);

ⅴ.打印

           alert("保存成功！");

ⅵ.按钮2打印以上所有数据

第一种方式打印:

           function MyClick2() {

                alert(sessionStorage.getItem("k_username"));

                alert(sessionStorage.getItem("k_pwd"));

            }

第二种方式打印：

         function MyClick2() {

             alert(localStorage.getItem("k_username"));

             alert(localStorage.getItem("k_pwd"))

            }

结果显示:

 

ⅶ.扩展：localStorage的removeItem方法

             //如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

             //localStorage.removeItem("k_username");

跟踪本地数据情况:

结果显示:

 

ⅷ.localStorage的clear方法

             //如果我想把所有数据都清除？localStorage有个方法

             localStorage.clear();

结果显示:

    

代码显示：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <script src="js/jquery-1.4.1.min.js"></script>

     <script src="js/webSt.js"></script>

     <script type="text/javascript">

         function MyClick1() {

             //1.获取到它的用户名和密码

             var username = $("#TxtUserName").val();

             var pwd = $("#TxtPwd").val();

             //2.sessionStrage的方式

             //sessionStorage.setItem("k_username", username);

             //sessionStorage.setItem("k_pwd", pwd);

             //第二种方式

             localStorage.setItem("k_username", username);

             localStorage.setItem("k_pwd",pwd);

             //3.打印

             alert("保存成功！");

         }

          function MyClick2() {

              //4.打印以上

              //第一种方式

              //alert(sessionStorage.getItem("k_username"));

              //alert(sessionStorage.getItem("k_pwd"));

              //第二种方式打印

              //如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

              //localStorage.removeItem("k_username");

              //如果我想把所有数据都清除？localStorage有个方法

              localStorage.clear();

              alert(localStorage.getItem("k_username"));

              alert(localStorage.getItem("k_pwd"))

             }

     </script>

 </head>

 <body>

     <table>

         <tr>

             <td>用户名:</td>

             <td>

                 <input type="text" id="TxtUserName" />

             </td>

         </tr>

         <tr>

             <td>密码:</td>

             <td>

                 <input type="password" id="TxtPwd" />

             </td>

         </tr>

         <tr>

             <td>

                 <input type="button" value="按钮1" onclick="MyClick1()"/>

             </td>

             <td>

                 <input type="button" value="按钮2"  onclick="MyClick2()"/>

             </td>

         </tr>

     </table>

 </body>

 </html>

代码显示

4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <script src="js/jquery-1.4.1.min.js"></script>

     <script type="text/javascript">

     $(function () {

         //4.页面刷新之后判断它是否为空？

         if (localStorage.getItem("k_showCon") != null) {

             //5.存在，就把获取到的内容存到里面去

             "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));

         }

     });

         function preservationClick()

         {

             var sCon = $("#mCon").val();

             //2.获取到内容之后加到显示div里去？怎么放呢？这里我们用append方法

             $("#showCon").append("<div>" + sCon + "</div>");

             //3.预期的是刷新之后留言还在

             localStorage.setItem("k_showCon", $("#showCon").html());

         }

         function ClearClick()

         {

             //6.获取到显示DIV里面的内容清除

             $("#showCon").html("");

             localStorage.clear();

         }

     </script>

 </head>

 <body>

     <div>

         <table>

             <tr>

                 <td colspan="">

                     <textarea id="mCon" cols="" rows=""></textarea>

                 </td>

             </tr>

             <tr>

                 <td><input type="button" value="留言" onclick="preservationClick()" /></td>

                 <td><input type="button" value="清除" onclick="ClearClick()" /></td>

             </tr>

         </table>

         <div id="showCon"></div>

     </div>

 </body>

 </html>

效果显示:

webstorage[html5的本地数据处理]的更多相关文章

  1. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  2. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  3. HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...

  4. HTML5之本地文件系统API - File System API

    HTML5之本地文件系统API - File System API 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等.除了上面我们提到 ...

  5. 【转】HTML5 LocalStorage 本地存储

    原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...

  6. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  7. Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查

    大家好!我是范范.本人刚接触ST2到现在刚刚两个月,6月1号接的项目,那时才知道有Sencha Touch2这个东西,到现在两个月了期间的幸酸就不说了.今天说说在项目中用到的HTML5的本地存储.可能 ...

  8. HTML5 LocalStorage 本地存储总结

    存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"] ...

  9. HTML5 LocalStorage 本地存储（转）

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

随机推荐

  1. Git Day01，仓库，commit，版本切换

    1st,创建版本库:  2nd,添加文件:  3rd,修改文件,并提交: 4th,版本切换:git log查看版本:版本回退: 又回到原始版本了: 回到“未来”: 今天就到这里,明天继续.Git确实挺 ...

  2. Oracle查询DQL脚本记录

    --查询列 Select t.sname,t.ssex,t.class from student t --t 别名; Select *from student t; --* 代表查询表内所有数据 '; ...

  3. MVVM架构~Knockoutjs系列之js接收C#数据集合的方式

    返回目录 在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockou ...

  4. 关于Lua优质文章链接

    Lua 语言 15 分钟快速入门(博客-伯乐在线) http://blog.jobbole.com/70480/

  5. Atitit 图像清晰度 模糊度 检测 识别 评价算法 源码实现attilax总结

    Atitit 图像清晰度 模糊度 检测 识别 评价算法 源码实现attilax总结 1.1. 原理,主要使用像素模糊后的差别会变小1 1.2. 具体流程1 1.3. 提升性能 可以使用采样法即可..1 ...

  6. Atitit atiuse软件系列

    Atitit atiuse软件系列 1.1.  Atian inputmethod 输入法 方言与多语言多文字支持 (au)1 1.2. File searcher 文件搜索器,支持压缩文件与正则表达 ...

  7. 使用替换shader渲染

    相关函数: Camera.RenderWithShader(shader: Shader, replacementTag: string) 使用指定shader渲染,只影响一帧 Camera.SetR ...

  8. 深入理解PHP内核(九)变量及数据类型-静态变量

    原文链接:http://www.orlion.ga/251/ 通常静态变量是静态分配的,他们的生命周期和程序的生命周期一样长,只有在程序退出后才结束生命周期,这和局部变量相反,有的语言中全局变量也是静 ...

  9. 【博客美化】06.添加QQ交谈链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  10. toString()方法

    前面的话 本文将介绍toString()方法,toString()方法返回反映这个对象的字符串 [1]undefined和null没有toString()方法 undefined.toString() ...