如何在项目中将sessionStorage替换为Cookie？代码问题求助

问题说明 #

需要将项目中使用sessionStorage存储和读取数据的代码替换为Cookie实现，原代码如下：

sessionStorage.setItem("modelcode", modelcode);
sessionStorage.setItem("setuptypecode", setuptypecode);

var modelcode = sessionStorage.getItem("modelcode");
var setuptypecode = sessionStorage.getItem("setuptypecode");

自行编写的setCookie和getCookie函数未生效，代码如下：

function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        }

        function getCookie(c_name) {
            var i, x, y, ARRcookies = document.cookie.split(";");
            for (i = 0; i < ARRcookies.length; i++) {
                x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
                y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
                x = x.replace(/^\s+|\s+$/g, "");
                if (x == c_name) {
                    return unescape(y);
                }
            }
        }

问题分析与修正 #

原函数存在几个导致失效的问题：

• escape()和unescape()属于过时API，对特殊字符的处理存在缺陷，应替换为encodeURIComponent()和decodeURIComponent()
• getCookie中直接调用indexOf("=")，如果某个Cookie没有值（即不含=）会导致报错
• 未处理exdays为0或负数的情况，可能导致Cookie立即过期

修正后的Cookie操作函数 #

function setCookie(name, value, exdays = 7) {
    const date = new Date();
    date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    // 编码值并设置Cookie，添加path确保全站可用
    document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
}

function getCookie(name) {
    const nameEQ = `${name}=`;
    const cookies = document.cookie.split(';');
    for(let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        // 去除开头空格
        while (cookie.charAt(0) === ' ') cookie = cookie.substring(1);
        if (cookie.indexOf(nameEQ) === 0) {
            return decodeURIComponent(cookie.substring(nameEQ.length));
        }
    }
    // 未找到对应Cookie时返回null
    return null;
}

替换原代码示例 #

将原sessionStorage的读写逻辑替换为修正后的Cookie函数：

// 存储数据
setCookie("modelcode", modelcode, 7); // 第三个参数为过期天数，可根据需求调整
setCookie("setuptypecode", setuptypecode, 7);

// 读取数据
var modelcode = getCookie("modelcode");
var setuptypecode = getCookie("setuptypecode");

验证方法 #

打开浏览器开发者工具（F12），在Application（Chrome）或Storage（Firefox）面板中查看Cookie列表，确认modelcode和setuptypecode是否已正确存储。

内容的提问来源于stack exchange，提问作者Ritik Soni