jQuery中localStorage.setItem存URL参数后无参数URL显示undefined问题

嘿，咱们来拆解下你遇到的问题——首先得明确一个关键点：localStorage是同域下所有页面共享的存储，正常来说，你在带参数页面存了campaign: test1之后，访问同域的无参数页面应该能读到这个值，而不是undefined。你碰到的情况大概率是下面几种原因之一：

1. 操作顺序导致的初始状态问题 #

如果你的操作流程是这样的：

• 先打开无参数的http://www.example.com/，这时候代码里campaignName是null，不会执行localStorage.setItem，所以localStorage里根本就没有campaign这个键，这时候调用localStorage.getItem('campaign')自然返回undefined
• 之后再打开带参数的URL存数据，但可能你没刷新无参数页面，或者是在隐私模式下分开打开了两个标签（隐私模式下不同标签的localStorage是不共享的）

解决办法很简单：在带参数页面确认数据存好之后，回到无参数页面刷新一下，应该就能读到test1了。

2. 域名/子域名的细微差异 #

localStorage的同源策略要求协议、域名、端口完全一致才会共享数据。比如：

• 你可能在http://example.com/（不带www）存了数据，但访问的无参数页面是http://www.example.com/（带www），这俩被浏览器视为不同域，localStorage自然不互通
• 或者协议不一样（比如http和https），也会导致数据读不到

你可以仔细检查下两个URL的协议、域名、端口是不是完全一致。

3. 代码里藏着没注意到的覆盖逻辑 #

说不定你在无参数页面的其他代码里，有类似localStorage.removeItem('campaign')或者localStorage.setItem('campaign', undefined)的操作，不小心把存储的值给清空或覆盖了。

你可以打开浏览器开发者工具的Application标签（Chrome/Firefox都有），在localStorage面板实时观察：

• 先打开带参数页面，确认campaign被设成了test1
• 再打开无参数页面，看看campaign是不是被自动删除或修改了

顺便给你提个代码优化小建议 #

你写的URL参数解析代码里有个小坑：split('&')应该改成split('&')——因为window.location.search里的参数分隔符是原生的&，不是HTML实体&，这可能导致某些参数解析失败。优化后的解析函数是这样的：

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'), // 这里改成&
        sParameterName, i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    // 建议加个默认返回值，避免返回undefined
    return null;
};

另外，如果你想让无参数页面也能保留之前存的campaign值，根本不需要在无参数页面加额外代码——只要同域且没有覆盖逻辑，这个值会一直存在，直到你主动删除或者清除浏览器缓存。

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