当前位置: 首页 > Web前端 > HTML

WebStorage--HTML5LocalStorage

时间:2023-04-02 21:08:57 HTML

什么是WebStorageWebStorage是一种类似于HTML5中引入的cookies的本地存储功能,可以用于客户端的本地存储。与cookies相比,它有以下优点:存储空间大:cookies只有4KB的存储空间,而官方推荐的WebStorage是每个网站5M。可选性强:WebStorage分为sessionStorage和localStorage两种。WebStorage的使用方式与sessionStorage和localStorage相同,只是sessionStorage是临时存储session中的数据。当浏览器关闭时,数据消失。.localStorage在本地存储数据。理论上,除非手动删除,否则数据永远不会消失。API:保存数据localStorage.setItem(key,value);sessionStorage.setItem(键,值);读取数据localStorage.getItem(key);sessionStorage.getItem(关键);删除单个数据localStorage.removeItem(key);sessionStorage.removeItem(key);删除所有数据localStorage.clear();sessionStorage.clear();获取索引键localStorage.key(index);sessionStorage.key(索引);注意:WebStorageAPI只能对字符串进行操作在使用WebStorage之前,我们需要注意以下几点:仅支持IE8及以上版本。因为只能操作字符串类型的数据,有些JSON对象因为是明文存储,所以需要进行转换,完全没有隐私可言,一定不能用来存放重要信息,浏览器的加载速度会有一定程度的减慢,无法被爬虫抓取。使用WebStorage前,请添加如下代码判断浏览器是否支持WebStorageif(window.localStorage){//orwindow.sessionStoragealert("browsersupportslocalStorage")//主要逻辑业务}else{alert("browsingdoesnotsupportlocalStorage")//alternativemethod}写一个学生管理小程序先准备好演示WebStorage基本用法的简单html页面学生姓名:
性别:
学号:
家庭住址:
电话号码:



输入姓名:

输入姓氏名称:


在这个程序中,我们将实现增删改查的基本功能以及检查、修改数据的功能相信大家看过之后可以自己写了接下来写方法:storage//使用localStorage存储数据functionsave(){varcontact=newObject();varName=document.getElementById("name").value;varSex=document.getElementById("sex").value;varNum=document.getElementById("num").value;varAdd=document.getElementById("add").value;varTel=document.getElementById("tel").value;如果(JTrim(名称)!=“”&&JTrim(性别)!=“”&&JTrim(Num)!=“”&&JTrim(添加)!=“”&&JTrim(电话)!=“”){联系。名字=名字;contact.sex=性别;contact.num=Num;contact.add=添加;contact.tel=电话;varstr=JSON.stringify(contact);//处理JSON对象,从对象中解析出字符Stringif(window.localStorage){localStorage.setItem(contact.name,str);}else{alert("你还不能使用这个功能");返回;}}else{alert("请输入内容");}}Trim()方法用于判断输入是否为空functionJTrim(s){returns.replace(/(^\s*)|(\s*$)/g,"");}显示所有信息functionloadAll(){varresource=document.getElementById("list");if(window.localStorage){varresult="";result+="姓名性别学号家庭住址电话”;for(vari=0;i"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"";}结果+="";resource.innerHTML=结果;}else{alert("您还不能使用该功能");返回;}}查询函数h(){varresource=document.getElementById("tato");varsearch_name=document.getElementById("search_name").value;如果(window.localStorage){varstr=localStorage.getItem(search_name);if(str!=null){varresult="";result+="姓名性别学号家庭住址电话”;varcontact=JSON.parse(str);结果+=""+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"";结果+="";resource.innerHTML=结果;}else{alert("系统中没有此人");返回;}}else{alert("您还不能使用该功能");返回;}}删除函数del(){vardel_name=document.getElementById("del_name").value;如果(window.localStorage){varresult=localStorage.getItem(del_name);localStorage.removeItem(del_name);if(result!=null){alert("删除成功");}else{alert("系统中没有此人");返回;}}else{alert("你还不能使用这个功能");返回;这里如果要删除所有数据进行处理,只需要替换localStorage.removeItem();用localStorage.clear();演示地址--魔改界面,开心就好=.=下面我们在浏览器的开发者工具里看看WebStorage是怎么存储的,我们可以在chrome开发者工具里找到Application选项,其中有今天的主角:LocalStorage和SessionStorage现在输入一些数据点击提交,我们马上可以在LocalStorage中看到明文存储的数据(下面的值是存储在JSON对象中,所以操作的时候需要转换格式)总结WebStorage简单实用,但是明文存储数据确实有硬伤,使用前请三思