H5新特性 本地存储---cookie localStorage sessionStorage

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

 在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  https://www.cnblogs.com/677a/p/11730470.html