html5 localstorage,web localstorage
1.webStorage是什么？
WebStorage是html5中本地化存储的一种方式，但在此之前，我们使用的是cookie存储。
2.那它们之间的区别是什么？
.中存在的问题。cookie:
.Cookies需要向服务器发送请求，服务器返回一个cookieId，存储在浏览器缓存中，消耗一定带宽。【Cookies会和每个HTTP请求的头信息一起发送，无形中增加了网络流量】；
二。Cookies存储有限的数据容量，根据不同的浏览器类型而有所不同。IE6只能存储2K左右；
.webstorage只需要在本地存储数据；
3.我们可以举一个小例子说明一下
输入用户名和密码。单击按钮1时，保存数据。当您单击按钮2时，您可以刷新页面并获得它。
流程：
.创建活动
XML/HTML代码将内容复制到剪贴板函数MyClick1() {} ii。通过一个id获取其用户名JavaScript代码将内容复制到剪贴板var username=$ (# txtusername )。val()；三。通过一个id获取其密码JavaScript代码，并将内容复制到剪贴板varpwd=$(#TxtPwd )。val()；获得用户名和密码后，我们如何存储数据？有两种方法：
第一个：sessionStorege，在Firefox2的Firefox浏览器中使用；
生命周期：以这种方式存储的数据只在窗口级别有效。当同一个窗口(或标签页)页面被刷新或跳转时，可以获取本地存储的数据。当一个新的窗口或页面打开时，原始数据将无效[仅对于当前页面]
缺点：IE不支持，无法实现数据的持久存储。
代码将内容复制到剪贴板session storage . setitem( k _ username ，用户名)；sessionStorage.setItem(k_pwd ，pwd)；注意：sessionStorage.setItem由键值对存储；
第二种方式：本地存储
LocalStorage是Web存储的互联网存储规范的一部分，现在在Firefox 3.5、Safari 4和IE8中都支持。
生命周期：存储在本地c盘，关闭和打开浏览器后仍然存在；
缺点：不被旧版浏览器支持。
代码将内容复制到剪贴板local storage . setitem( k _ username ，用户名)；localStorage.setItem(k_pwd ，pwd)；五.印刷
代码将内容复制到剪贴板警报(“保存成功！”);.按钮2打印上述所有数据。
第一种打印方式：
代码将内容复制到剪贴板函数my click 2(){ alert(session storage . getitem( k _ username )；alert(session storage . getitem( k _ pwd ))；}第二种方式是打印JavaScript代码，将内容复制到clipboard function my click 2(){ alert(local storage . getitem( k _ username )；alert(local storage . getitem( k _ pwd )}结果显示：
.扩展：localStorage的removeItem方法
//我想删除它的用户名怎么办？通过其键删除，使其在获取时为空//local storage . remove item( k _ username )；跟踪本地数据：
结果显示：
.的清除方法。本地存储
//如果我要清除所有数据呢？localStorage有一个localStorage.clear()方法；结果显示：
代码显示：
XML/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 scripts RC= js/jquery-1。4 .1 .量滴js /script scriptsrc= js/webst。js /script script type= text/JavaScript 函数my click 1(){//1 .获取到它的用户名和密码varusername=$(#TxtUserName ).val()；varpwd=$(#TxtPwd ).val()；//2.sessionStrage的方式//会话存储。setitem( k _ username ，用户名);//会话存储。setitem( k _ pwd ，pwd)；//第二种方式本地存储。setitem( k _ username ，用户名);localStorage.setItem(k_pwd ，pwd)；//3.打印警报(保存成功!);} functionMyClick2(){ //4 .打印以上//第一种方式//alert(会话存储。getitem( k _ username )；//alert(会话存储。getitem( k _ pwd )；//第二种方式打印//如果我想删除它的用户名怎么做呢？通过它的键把它删除，这样获取时就为空//本地存储。删除项目(“k _ username”)；//如果我想把所有数据都清除？本地存储有个方法本地存储。clear()；警报(本地存储。getitem( k _ username )；警报(本地存储。getitem( k _ pwd )}/script/head body table tr TD用户名：/TD TD input type= text id= txt username //TD/tr tr TD密码：/TD TD输入类型= password id= txt pwd //TD/tr tr TD输入类型= button value=按钮1 onclick= my click 1()//TD TD input type= button value=按钮2 onclick= my click 2()//TD/tr/table/body/html 4。网络存储制作简易留言板[代码为了展示效果所以把射流研究…就直接在超文本标记语言里面写]
XML/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 scripts RC= js/jquery-1。4 .1 .量滴js /script脚本类型= text/JavaScript $(function(){//4。页面刷新之后判断它是否为空？如果(本地存储。getitem( k _ showCon )！=null){ //5 .存在，就把获取到的内容存到里面去 k_showCon ，$(#showCon ).html(本地存储。getitem( k _ showCon )；} });functionpreservationClick(){ varsCon=$( # mCon ).val()；//2.获取到内容之后加到显示差异里去？怎么放呢？这里我们用附加方法$(#showCon ).append( div sCon /div))；//3.预期的是刷新之后留言还在本地存储。setitem( k _ showCon ，$(#showCon ).html())；} functionClearClick() { //6 .获取到显示差异里面的内容清除$(#showCon ).html(" ")；本地存储。clear()；}/script/head body div table tr tdcolspan= 2 textareaid= mCon cols= 25 rows= 10 /textarea/TD/tr tr tdinputtype= button value=留言onclick= preservation click()//TD tdinputtype= button value=清除onclick= clear click()//TD/tr/table divid= showCon /div/div/body/html效果显示：
以上这篇深入剖析webstorage[html5的本地数据处理]就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www。cn博客。com/旺旺王max/p/5634625。超文本标记语言
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。