1、cookie
1、cookie的容量为:5kb //cookie的存储的数据类型为：数字，字符串
2、cookie是以名-值的方式存储：userName = xaoming
3、cookie能存储的数据条目为：50条
4、cookie必须运行在服务器的条件下
// 设置cookie(名-值 对的方式存储expires为存储过期时间) var time = new Date();
console.log(time.getDate());
time.setDate(time.getDate()+10);
//设置时间 document.cookie = 'name=mack;expires='+time;
document.cookie = 'password = 123456789;expires='+time;
由此得封装函数 ：function setCookie(name,value,time){
var time = new Date(); time.setDate(time.getDate()+10);
document.cookie = name +'='+ value+';'+'expires='+time;
}
// 从cookie中取值 var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var nameArr = arr[i].split('=');
if (nameArr[0] == 'name') {
console.log(nameArr[1]);
} }
由此得封装函数：
function gatCoolie(name){
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var nameArr = arr[i].split('= ');
if (nameArr[0] == name) {
console.log(nameArr[1]);
} } }
应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> 用户名：<input type="text" id="usr">
</input> 密码：<input type="text" id="psd">
</input> 登录：<input type="button" id="btn">
</input></body><script type="text/javascript" src="[cookie.js](view-source:file:///Users/luofeng/Documents/%E4%BB%A3%E7%A0%81/%E6%96%B0%E7%8F%AD%E4%BB%A3%E7%A0%81/%E7%AC%AC%E5%9B%9B%E5%91%A8/lesson-18/%E8%AF%BE%E4%B8%8A%E4%BB%A3%E7%A0%81/cookie.js)">
</script>
<script type="text/javascript">
var usr = document.querySelector('#usr');
var psd = document.querySelector('#psd');
var btn = document.querySelector('#btn');
usr.value = gatCookie('userName');
psd.value = gatCookie('password');
console.log(usr.value,psd.value );
btn.onclick = function(){ setCookie('userName',usr.value);
setCookie('password',psd.value); } // 存一个用户名
// var time = new Date();
// time.setDate(time.getDate()+10);
// setCookie('userName','zhangyu',time);
// 获取用户名 // var btn = gatCookie('userName');
// var btn = gatCookie('password');
// console.log(name);
</script>
</html>
2、localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用户名：<input type="text" id="usr"></input>
密码：<input type="text" id="psd"></input>
登录：<input type="button" id="btn"></input>
<script type="text/javascript"> var usr = document.querySelector('#usr');
var psd = document.querySelector('#psd');
var btn = document.querySelector('#btn');
// localStorage：H5的新特性，不支持IE8以下。它存储内容为5M 不会过期
// 设置localStorage if (window.localStorage) { console.log('支持');
//1、 存值 // localStorage.userName = 'haha';
//2、 存值 // localStorage['Name'] = 'mack'; //
//3、 存值 常用 // localStorage.setItem('password','123456'); //
//1、 取值 // alert(localStorage.userName); //
//2、 取值 // alert(localStorage['Name']); //
//3、 取值 常用 // alert(localStorage.getItem('password')); //
// 删除数据 // localStorage.removeItem('password');
usr.value =localStorage.getItem('userName',usr.value);
psd.value =localStorage.getItem('password',psd.value);
btn.onclick = function(){
localStorage.setItem('userName',usr.value);
localStorage.setItem('password',psd.value);
}
}else{ console.log('不支持'); } //
localStorage.userName = '李世杰';
</script>
</html>
3、 touch.js插件的使用
使用方法请戳：
http://touch.code.baidu.com/examples.html
4、swiper.js插件的使用
使用方法请戳：
http://www.swiper.com.cn/api/function/2014/1218/103.html
网友评论