WEB前端第六十四課——H5新特性：數據持久化cookie、localStorage、sessionStorage

時間 2021-03-03

標籤 javascript php java 數據庫 json 數組瀏覽器 cookie session app 欄目 HTML 简体版

原文原文鏈接

1.數據持久化操做對象javascript

　　本地存儲，是相對於數據庫存儲而言的，是指將數據存儲在我的設備上。php

　　存儲的操做方式有三種：java

　　⑴ cookie數據庫

　　⑵ localStoragejson

　　⑶ sessionStorage數組

2.cookie瀏覽器

　　能夠經過前臺或後臺進行設置和獲取數據，cookie

　　在訪問網站時自動向後臺發送數據。session

　　⑴ 前臺設置cookieapp

　　　　document.cookie="key=value;exspires=有效時間/ms;path=存儲路徑";

　　　　說明：有效期爲GMT格式，使用「toGMTString()」方法將標準時間轉換爲GMT格式；

　　　　　　　有效時間以後，cookie存儲的數據信息會自動清除；

　　　　　　　鍵值若是有漢字須要使用「escap()」方法轉碼。

　　　　獲取cookie：document.cookie　　//結果爲字符串格式的cookie值。

　　代碼示例：

<script>
    var timeNow=new Date();    //結果爲日期時間格式
    var timeStamp=timeNow.getTime()+1000*10;  //將日期時間轉換爲時間戳ms，設置有效期。
    var expires=new Date(timeStamp).toGMTString();  //使用toGMTString()方法將時間戳轉換爲「GMT」時間格式。
    var expires2=new Date(new Date().getTime()+1000*10).toUTCString();  //GMT=UTC+0，兩者結果相同。
    console.log(expires);   //結果爲GMT格式的時間
    console.log(expires2);
    // 設置及讀取cookie
    document.cookie="userName=Rebecca;expires="+expires2;
    console.log(document.cookie);   //結果爲cookie鍵值字符串
    var Arr=document.cookie.split('=');
    var cookieObj={};
    cookieObj[Arr[0]]=Arr[1];
    console.log(cookieObj);     //將cookie字符串轉換爲數組，再轉換爲對象後，可經過key訪問value。
    console.log(cookieObj.userName);
</script>

　　⑵ PHP設置cookie

　　　　設置cookie：setcookie('鍵','值','有效期/s','路徑');　　//有效期獲取使用「time()」

　　　　讀取cookie：$_COOKIE;　//結果爲「cookie鍵值對」構成的數組

　　　　說明：先後臺設置設置cookie時，前三個參數都是必須的！路徑則是可選參數。

　　　　　　　設置cookie時，若是鍵值存在則修改、不存在則增長；

　　　　　　　刪除cookie時，設置時間「time()-1」便可完成，先後臺同理。

　　　　　　　一般由後臺設置cookie，前臺進行獲取。

　　代碼示例：

<body>
    <button onclick="setCookie()">添加cookie</button>
<script>

    (function () {
        var cookie=document.cookie;
        if (cookie.length!=0){
            console.log(cookie);
            console.log(typeof cookie);     //字符串類型
        }else {
            console.log('no cookie');
        }
    })();
    function setCookie() {
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4){
                if (xhr.status==200){
                    console.log(xhr.responseText);
                    console.log(typeof xhr.responseText);   //字符串類型
                    console.log(JSON.parse(xhr.responseText));
                    console.log(typeof JSON.parse(xhr.responseText));   //數組類型
                }
            }
        }
        var formData=new FormData();
        formData.append('userName','Rebecca');
        xhr.open('post','cookie.php',true);
        xhr.send(formData);
    }
</script>
</body>

<?php
    $name=$_POST['userName'];
    setcookie('uName',$name,time()+60);  //後臺設置cookie有效時間，單位爲「S」。
    echo json_encode($_COOKIE);
?>

3.localStorage

　　本地存儲，經過js操做，在我的設備上進行存儲和獲取數據，

　　設置的數據若是不刪除會一直存在，存儲在瀏覽器中。

　　存儲設置：localStorage.setItem('key','value');　　//key存在爲修改，不然增長。

　　存儲讀取：localStorage.getItem('key');

　　存儲刪除：localStorage.removeItem('key');

4.sessionStorage

　　會話存儲，經過js操做，在瀏覽器打開時能夠存儲和獲取數據，當瀏覽器關閉時數據刪除。

　　操做方法與localStorage相同。

　　存儲設置：sessionStorage.setItem('key','value');　　//key存在爲修改，不然增長。

　　存儲讀取：sessionStorage.getItem('key');

　　存儲刪除：sessionStorage.removeItem('key');

5.存儲數據類型

　　簡單類型數據，直接存儲；

　　對象類型數據，需將對象轉換成字符串進行存儲。

　　localStorage複雜存儲代碼示例：

<script>
    var obj={
        'name':'Rebecca',
        'sex':'female',
        'age':'21',
        'collage':'Harvard'
    }
    var str=JSON.stringify(obj);    //將對象轉換成字符串格式才能存儲
    localStorage.setItem('person',str);    //存儲複雜數據
    var store=localStorage.getItem('person');   //獲取結果爲字符串
    var storeObj=JSON.parse(store);     //將字符串轉爲對象
    console.log(storeObj.name);
</script>

6.cookie複雜存儲

　　代碼示例：

<script>
    //利用Ajax發送複雜數據至後臺，PHP後臺設置cookie
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function () {
        if (xhr.readyState==4){
            if (xhr.status==200){
                console.log(JSON.parse(xhr.responseText));
            }
        }
    }
    var formData=new FormData();
    formData.append('name','Rebecca');
    formData.append('sex','female');
    formData.append('age','21');
    xhr.open('post','cookie.php',true);
    xhr.send(formData);

    //前臺獲取cookie，並將字符串類型的cookie轉換爲可用對象數據。
    var cookie=document.cookie;
    console.log(cookie);     //獲取結果爲字符串；
//    將字符串轉換爲數組，而後再轉換爲對象
    var cookieArr=cookie.split(';');
    console.log(cookieArr);     //注意：數組中除第一個鍵值對，其餘的存在空格，在轉換爲對象時須要去除空格！！
    var cookieObj={};
    for (var i=0;i<cookieArr.length;i++){
        var kv=cookieArr[i].trim().split('=');
        cookieObj[kv[0]]=kv[1];
    }
    console.log(cookieObj);
    console.log(cookieObj.personName);
    console.log(cookieObj['personAge']);
</script>

<?php
    $name=$_POST['name'];
    $sex=$_POST['sex'];
    $age=$_POST['age'];
    setcookie('personName',$name,time()+60*2);  //後臺設置cookie有效時間，單位爲「S」。
    setcookie('personSex',$sex,time()+60*2);  //後臺設置cookie有效時間，單位爲「S」。
    setcookie('personAge',$age,time()+60*2);  //後臺設置cookie有效時間，單位爲「S」。
//    $success=array('msg'=>'ok','info'=>$_COOKIE);
    echo json_encode($_COOKIE);
?>