HTML5 關於一些本地操做 cookie，sessionStorage，localStorage

時間 2019-12-13

標籤 html5 html 關於一些本地 cookie sessionstorage localstorage 欄目 HTML5 简体版

原文原文鏈接

1，b/s 開發中常常會使用到 cookie，大部分狀況下，都是由後端代碼實現，那麼 js 怎麼實現對 cookie 的操做呢？javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>cookie</title>
</head>
<style type="text/css">
    input {
        width: 200px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        border: none;
    }
</style>
<body>
    <input id="old-text" type="text" />
    <input id="writer" type="button" value="寫入或修改COOKIE" />
    <input id="new-text" type="text" />
    <input id="reader" type="button" value="讀取COOKIE" />
    <input id="delete" type="button" value="刪除COOKIE" />
</body>
<script type="text/javascript">
    // 封裝操做 cookie 的方法，主要依賴於 document.cookie，比較簡單
    var cookie = function (name, value, options) {
        if (typeof value != "undefined") {
            options = options || {};
            if (value === null) {
                value = "";
                options.expires = -1
            }
            var expires = "";
            if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == "number") {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000))
                } else {
                    date = options.expires
                }
                expires = "; expires=" + date.toUTCString()
            }
            var path = options.path ? "; path=" + (options.path) : "";
            var domain = options.domain ? "; domain=" + (options.domain) : "";
            var secure = options.secure ? "; secure" : "";
            document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("")
        } else {
            var cookieValue = null;
            if (document.cookie && document.cookie != "") {
                var cookies = document.cookie.split(";");
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) == (name + "=")) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break
                    }
                }
            }
            return cookieValue;
        }
    };

    // 寫入或者修改
    document.getElementById('writer').onclick = function(){
        cookie('text', document.getElementById('old-text').value);
    }

    // 讀取
    document.getElementById('reader').onclick = function(){
        document.getElementById('new-text').value = cookie('text');
    }

    // 刪除
    document.getElementById('delete').onclick = function(){
        cookie('text', null);
    }

    /* 其餘配置參數
    cookie("Key", "Value", {
        expires: 7, // 有效期, 單位天, 默認 -1，頁面關閉失效
        path: "/", // cookie 存放的路徑, 默認爲當前頁面路徑, 跨頁面讀取可設置爲根目錄, 或者顯示設置 path
        domain:  // Cookie的域名屬性，默認是建立該cookie的頁面域名,通常不設置
        secure: true // cookie的傳輸是否要求一個安全協議，例如HTTPS, 默認爲 fasle
    });
    */
</script>
</html>