长沙定制网站建设,广西东晋建设有限公司网站,美工好的网站,南京越城建设集团有限公司网站什么是Web Storage Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能#xff0c;可以用于客户端的本地存储#xff0c;其相对于cookie来说有以下几点优势#xff1a; 存储空间大#xff1a;cookie只有4KB的存储空间#xff0c;而Web Storage在官方建议中为每个…什么是Web Storage Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能可以用于客户端的本地存储其相对于cookie来说有以下几点优势 存储空间大cookie只有4KB的存储空间而Web Storage在官方建议中为每个网站5M。 可选择性强Web Storage分为两种sessionStorage和localStorage Web Storage的使用方法 在使用上session Storage和local Storage大同小异只是session Storage是将数据临时存储在session中浏览器关闭数据随之消失。而local Storage则是将数据存储在本地理论上来说数据永远不会消失除非人为删除。 API 保存数据 localStorage.setItem( key, value ); sessionStorage.setItem( key, value ); 读取数据 localStorage.getItem( key ); sessionStorage.getItem( key ); 删除单个数据localStorage.removeItem( key ); sessionStorage.removeItem( key ); 删除全部数据localStorage.clear( ); sessionStorage.clear( ); 获取索引的keylocalStorage.key( index ); sessionStorage.key( index ); 注意Web Storage的API只能操作字符串 在使用Web Storage之前我们需要注意以下几点 仅支持支持IE8及以上版本 由于只能对字符串类型数据进行操作所以对一些JSON对象需要进行转换 因为是明文存储所以毫无隐私性可言绝对不能用于存储重要信息 会是浏览器加载速度在一定程度上变慢 无法被爬虫程序爬取 使用Web Storage之前请加上以下代码对浏览器对Web Storage的支持性进行判断 if(window.localStorage){//或者window.sessionStorage alert(浏览器支持localStorage) //主逻辑业务 }else{ alert(浏览不支持localStorage) //替代方法 } 我们来写一个学生管理小程序用于演示Web Storage的基本用法 简单的html页面先准备好 div styleborder: 2px dashed #ccc;width:320px;float: left; label forname学生姓名:/label input typetext idname namename/ br/ label forsex性别:/label input typetext idsex namesex/ br/ label fornum学号:/label input typetext idnum namenum/ br/ label foradd家庭住址:/label input typetext idadd nameadd/ br/ label fortel电话号码:/label input typetext idtel nametel/ br/ input typebutton onclicksave() value提交信息/ hr/ input typebutton onclickloadAll() value查看所有/ hr/ label forsearch_name输入姓名/label input typetext idsearch_name namesearch_name/ br/ input typebutton onclicksearch() value查询/ hr/ label fordel_name输入姓名/label input typetext iddel_name namedel_name/ br/ input typebutton onclickdel() value删除/ hr/ /div br/ div idlist/div div idtato/div 在这个程序里面我们将实现增删查的基本功能修改数据的功能相信大家看完后自己就能写出来。 接下来开始写方法 存储 //利用localStorage存储数据 function save() { var contact new Object(); var Name document.getElementById(name).value; var Sex document.getElementById(sex).value; var Num document.getElementById(num).value; var Add document.getElementById(add).value; var Tel document.getElementById(tel).value; if(JTrim(Name) ! JTrim(Sex) ! JTrim(Num) ! JTrim(Add) ! JTrim(Tel) ! ) { contact.name Name; contact.sex Sex; contact.num Num; contact.add Add; contact.tel Tel; var str JSON.stringify(contact);//对JSON对象进行处理用于从一个对象解析出字符串 if(window.localStorage) { localStorage.setItem(contact.name,str); } else { alert(您暂时还无法使用本功能); return; } } else { alert(请输入内容); } } 其中用到了Trim()这个方法用于判断输入是否为空 function JTrim(s) { return s.replace(/(^\s*)|(\s*$)/g, ); } 展示所有信息 function loadAll() { var resource document.getElementById(list); if(window.localStorage) { var result table border 1; result trtd姓名/tdtd性别/tdtd学号/tdtd家庭住址/tdtd电话号码/td/tr; for(var i 0;i localStorage.length; i) { var Name localStorage.key(i);//用于得到索引的key在这个程序里key为name var str localStorage.getItem(Name); var contact JSON.parse(str);//对JSON对象进行处理用于从一个字符串中解析出JSON对象 result trtdcontact.name/tdtdcontact.sex/tdtdcontact.num/tdtdcontact.add/tdtdcontact.tel/td/tr; } result /table; resource.innerHTML result; } else { alert(您暂时还无法使用本功能); return; } } 查询 function search() { var resource document.getElementById(tato); var search_name document.getElementById(search_name).value; if(window.localStorage) { var str localStorage.getItem(search_name); if(str ! null) { var result table border 1; result trtd姓名/tdtd性别/tdtd学号/tdtd家庭住址/tdtd电话号码/td/tr; var contact JSON.parse(str); result trtdcontact.name/tdtdcontact.sex/tdtdcontact.num/tdtdcontact.add/tdtdcontact.tel/td/tr; result /table; resource.innerHTML result; } else { alert(系统无此人); return; } } else { alert(您暂时还无法使用本功能); return; } } 删除 function del() { var del_name document.getElementById(del_name).value; if(window.localStorage) { var result localStorage.getItem(del_name); localStorage.removeItem(del_name); if(result ! null) { alert(删除成功); } else { alert(系统无此人); return; } } else { alert(您暂时还无法使用本功能); return; } } 在这里如果想对所有数据做删除处理则只需将localStorage.removeItem();换成localStorage.clear();即可转载于:https://www.cnblogs.com/huangshikun/p/6649138.html