本地存储的作用 ：避免登录网站时，用户在页面浏览时重复登录，也可以实现快速登录，一段时间内保存用户的登录效果，提高页面访问速率
在html5中提供三种数据持久化操作的方法：
- 1.cookie 可看作是记录简单内容的文本文件，直接绑定在html页面上。有前端设置和后端设置。有2中存储方式。不常用，难懂
cookie可以保存数据一段时间，只需要设置过期时间，过期时间到了，数据才会被删除；也可以是临时cookie/会话cookie，关闭浏览器，数据就会被删除
--------------------前端操作cookie----------------------------------------------
写入cookie：
document.cookie = 'key=value;expires = 在页面中保存的时间/过期时间戳';
【！！前端操作cookie时，时间戳必须通过toGMTString()方法转换为标准时间才行】读取cookie：
console.log(document.cookie);删除cookie：
document.cookie = 'key=value;expires=当前时间戳+1';
任何方式获取到的时间戳都要给Date对象前端使用cookie的demo:
var date = new Date();//获取时间戳 单位是毫秒
console.log(date.getTime());//getTime()获取时间戳的毫秒数 number
var expiresss = new Date(date.getTime()+1000*1000).toGMTString();//设置过期时间戳 即缓存时间
console.log(expires);
//写入cookie
document.cookie = 'username=frank;expires='+expiresss;
//如果不删除cookie,把写入和读取cookie的代码删除后再刷新页面，cookie仍然存在，只有时间戳到期后或者手动写入代码删除cookie，cookie才会被删除
var tempArr = document.cookie.split('=');
var tempObj = {};
tempObj[tempArr[0]] = tempArr[1];
console.log(tempObj);
console.log(tempObj.username);
//删除cookie
var expiresss = new Date(date.getTime()+1).toGMTString();后端操作cookie----------------------------------------------
1.写入cookie ：setcookie('key','value','expires','path');
2.获取cookie：$_COOKIE;
3.删除cookie：setcookie('key','value','expires+1','path');
setcookie('key','value','expires-1','path');
[说明： 哪个html页面访问了本php文件，就给哪个html页面添加cookie，在php中获取时间戳的方式为time()，单位是s； 前三个参数为必要参数，path为可选参数]
后端使用cookie的demo:
//<button>点我添加cookie</button>
//----------------------------------------------
<script>
(function() {
var cookie = document.cookie;
if(cookie.length != 0) {
cookie.log('已经登录，不用再显示登录按钮');
}
})();
document.querySelector('button').onclick = function() {
//Ajax给后端发送请求
var xhr = new XMLHttpRequest();//创建对象
xhr.onreadystatechange = function() {
if(xhr.readyState==4 && xhr.status==200) {
console.log(xhr.responseText);//打印后端的返回值
}
};
var formData = new FormData();//FormData()用于将数据编译成键值对，以便用XMLHttpRequest来发送数据----主要用于发送表单数据，也可用于发送带键数据
formData.append('uname','frank');//添加字段
//formDate对象的字段类型可以时Blob,File,string 如果字段类型不是Blob,也不是File,就会被转成string
xhr.open('post','lesson2_cookie(server).php',true);
xhr.send(formData);
}
</script>
<?php
$username = $_POST['uname'];
$success = array('msg'=>'ok','info'=>$_POST);
//设置cookie
setcookie('uname',$username,time()+60*60*24);//60s*60-->表示1h，60*60*24-->表示一天
//读取cookie echo json_encode($_COOKIE);
//删除cookie setcookie('uname','',time()-1);
setcookie('key','value','expires','path');//1.写入cookie
//path指的是cookie要加载到当前域名的哪个位置 设置cookie生效的范围【只有cookie有path】
$_COOKIE;//2.获取cookie
setcookie('key','value','expires+1','path');// 3.删除cookie
setcookie('key','value','expires-1','path');// 3.删除cookie
//给出反馈
$success = array('msg'=>'OK');
echo json_encode($success);
?>
- 2.localStorage 永久地保存数据 需要手动删除数据，数据才会消失
localStorage.setItem(key--string,value--string)：缓存当前页面的停留的子页面和展开的数据，当切换出去该页面再回来的时候，展示的仍然是离开时的页面和数据。
localStorage是持久化的本地保存，只要你没有主动删掉，就会一直存在。就像一些缓存，都把APP卸载了缓存还在。
window.localStorage.setItem(key,value);//存储指定key的数据（JSON格式）
window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据
window.localStorage.clear();//清空所有的存储数据
// 在本地存储中只能存储字符串的数据格式，所以从本地获取过来的存储数据需要JSON.stringify()转json对象- 3.sessionStorage
数据一旦被本地化后，只要页面不关闭就不会主动删除，一旦浏览器关闭后，数据就被自动删除 【在任何位置都能随便访问
sessionStorage是会话级别的本地保存，关闭浏览器数据就会消失
window.sessionStorage.setItem(key,value); //存储
window.sessionStorage.getItem(key); //读取
window.sessionStorage.removeItem(key); //删除简单实例：
$(function(){
// 当回车时，将数据存储到本地存储中，并从本地存储读取数据，判断当前数据时正在进行的还是已经完成的，然后再放入相应的列表项里
// 在本地存储中只能存储字符串的数据格式，所以从本地获取过来的存储数据需要JSON.string()转json对象
// 数据存储在title中，给个变量判断是否已经完成 var todolist = [{title:'',done:false}]
var todolist = [
{
title: '今天要完成jquery视频的学习。',
done: false
},
{
title: '今天要健身。',
done: false
},
];
// 本地存储只能存储字符串数据格式 为了保存数据原有的格式，可以先把数组对象转化为字符串格式
var tododata = JSON.stringify(todolist);//将json对象转字符串
// 缓存当前页面的停留的子页面和展开的数据，当切换出去该页面再回来的时候，展示的仍然是离开时的页面和数据。
localStorage.setItem("todo",tododata);//设置本地存储的字符串数据
// var data = localStorage.getItem("todo");//获取被赋值后的数据,也是字符串格式
// var data=JSON.parse(data);//读取之后，要将字符串转回数据原本的数组对象格式。字符串转json对象
// console.log(typeof(data));
// console.log(data);
// console.log(data[0].title);
// 回车事件:
$(document).keydown(function(e){
// 当回车时，从本地存储获取数据，读取数据，判断数据是否已经完成，将数据放入相应的列表里，
if(e.keyCode==13){//判断用户是否按下回车键
var data = localStorage.getItem("todo");//获取被赋值后的数据,也是字符串格式
var data=JSON.parse(data);//读取之后，要将字符串转回数据原本的数组对象格式。字符串转json对象
console.log(typeof(data));
console.log(data);
console.log(data[0].title);
// 将获取到的数组对象的title赋值给p标签
$('p').text(data[0].title);
}
});
})
运用本地存储localStorage的实例：todolist
每天进步一点点
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
