js 关于一些本地数据持久化操作 cookie，sessionStorage，localStorage

1，b/s 开发中经常会使用到 cookie，大部分情况下，都是由后端代码实现，那么 js 怎么实现对 cookie 的操作呢？

<!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>

2，H5 新增加的两个 api：sessionStorage，localStorage 他们都遵循 key value 的形式，并且 key value 都只能为字符串

3，分别都有两个方法如 sessionStorage.setItem(key, value) 和 sessionStorage.getItem(key) 使用方法也是相当简单

4，不同的是 sessionStorage 的值在页面关闭后马上失效，localStorage 只要不清理便永远存在

5，localStorage 有储存上限，不同的浏览器各不相同，大约为 2M 左右

posted on 2019-03-13 13:24 被遗忘的优雅阅读(661) 评论(0) 编辑收藏举报