本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率

在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  

每天进步一点点