一、cookie
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" name="username" id="username" value=""> 9 <input type="password" name="password" id="password" value=""> 10 <button type="button" name="button" id="btn">删除cookie</button> 11 <script type="text/javascript"> 12 // 1、设置、获取 13 var d = new Date(); 14 d.setHours(d.getHours() + 1);//1小时后过期 15 // path=/ 此时的/代表的是网站中所有的目录都可以访问这个cookie 16 document.cookie='username=zhangsan;expires='+d.toUTCString()+";path=/";//设置cookie 17 document.cookie;//获取所有的cookie 18 console.log(document.cookie) 19 20 // 2.设置、获取、删除cookie 21 // setCookie('password','123456',0.5*3600*1000)//30分钟后失效 22 // setCookie('username','zhangsan',0.5*3600*1000)//30分钟后失效 23 var btnObj = document.getElementById('btn') 24 btnObj.onclick = function(){ 25 delCookie('username'); 26 delCookie('password'); 27 } 28 function setCookie(name,value,expires){ 29 //计算有效期 30 var d = new Date(); 31 //设置有效期 32 d.setTime(d.getTime()+expires); 33 //设置cookie 34 document.cookie = name +'='+value+';expires='+d.toUTCString(); 35 } 36 function getCookie(name) { 37 //获取cookie 38 var cookieStr = document.cookie; 39 //根据；拆分 40 var cookieArr = cookieStr.split(';'); 41 //获取对应的cookie值 42 name += '=';//获取的cookie值都是后面有= 43 var result = ''; 44 for(var i=0;i<cookieArr.length;i++) { 45 //没一个cookie值得前面都有一个空格，将空格删除，再去查找对应的name值 46 var tmp = cookieArr[i].trim(); 47 if(tmp.indexOf(name) == 0) { 48 //如果查找成功，则直接返回 49 result = tmp.slice(name.length); 50 break; 51 } 52 } 53 //返回结果 54 return result; 55 } 56 function delCookie(name) { 57 var d = new Date(); 58 d.setTime(d.getTime()-1000); 59 document.cookie = name+'=;expires='+d.toUTCString(); 60 } 61 </script> 62 </body> 63 </html>
二、sessionStorage
【
html5新增的会话存储对象；
生命周期：关闭窗口或标签页之后将会删除这些数据
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
】
使用方法：
1 string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。 2 3 void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。 4 5 void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。 6 7 void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。 8 11 12 sessionStorage.setItem('username','admin') //存储数据 13 sessionStorage.getItem('username')//获取 14 sessionStorage.clear();//清楚所有 15 sessionStorage.removeItem('username')//清楚指定 16 17 18 也可以存储JSON对象【JSON.stringify(obj)和JSON.parse(stry)】 19 eg: 20 var obg = { 21 name:'tom', 22 age:22 23 }; 24 //存储值：将对象转换为Json字符串 25 sessionStorage.setItem('user',JSON.stringify(obj)); 26 //取值时：把获取到的Json字符串转换回对象 27 var userJsonStr = sessionStorage.getItem('user'); 28 userObj = JSON.parse(userJsonStr); 29 console.log(userObj.name);//tom