本地存储的作用 ：避免登录网站时，用户在页面浏览时重复登录，也可以实现快速登录，一段时间内保存用户的登录效果，提高页面访问速率
在html5中提供三种数据持久化操作的方法：
-
1.cookie 可看作是记录简单内容的文本文件，直接绑定在html页面上。有前端设置和后端设置。有2中存储方式。
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();
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 永久地保存数据 需要手动删除数据，数据才会消失
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
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 https://www.cnblogs.com/677a/p/11730470.html