随机文章
热门推荐

Web存储技术--WebStorage

发布时间:2017-09-14 17:19:02
Web存储技术--WebStorage

Web开发中,必然会遇到需要临时或永久保存的数据。

传统用cookie保存在客户端,或通过sessionID关联session对象(如Servlet的HttpSession对象)保存在服务器端。

缺点是cookie实在太小,只有4k,已经无法应付现在的大数据时代了。而保存在服务器端很多时间根本没必要,本地保存一下即可,何必再和服务器交互一下呢?

因此HTML5出台了新的存储技术:WebStorage

WebStorage分为localStorage和sessionStorage(原本还有一个globalStorage,站群,但在HTML5中已经被localStorage替代了)

localStorage:

即window.localStorage,通过setItem/getItem来保存获取数据。一旦保存后只能手动调用clear / removeItem来清理。

实例演示:页面上输入个人信息,提交表单后,希望将数据保存在本地,下次再打开同样画面时从本地取出数据自动填到表单中,可以省去每次手动填写的麻烦。

点击提交表单,将数据保存在本地的代码:

function doAply() { var info = { //将表单内容保存在对象中,以便JSON化该对象 name : "", male : "", address : "", phone : "" }; info.name = document.getElementById("inputName").value; //页面上获取Name var temp = document.getElementsByName("male"); //页面上获取Male for(var i=0; iwindow.onload = init; function init() { for (key in localStorage) { if(key == "myPage_Info") { var info = JSON.parse(localStorage[key]); //解析JSON字符串成为一个对象 document.getElementById("inputName").value = info.name; //此处开始将对象的属性填充到页面表单里 var temp = document.getElementsByName("male"); for(var i=0; i

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉做网站多少钱 http://www.45qun.com

上一篇:xslt的简略应用[xml--html]
下一篇:20170419
本站所有原创信息,未经许可请勿任意转载或复制使用
COPYRIGHT © 2015 浑源新闻网 ALL RIGHTS RESERVED.