现在我们已经做好了内容的列表页面，还有显示内容的页面。点击列表页面里的某个内容的标题，可以打开相应的内容页面来显示这个内容。

问题

不过如果这个时候，刷新一下浏览器的话，你会发现，内容页面上就不会再显示内容了。这是因为，在点击列表里的标题的时候，会执行 displayNode 这个用来显示内容的函数，并且会把所点击的内容的 id 作为调用这个函数时候的参数。

这样，在 displayNode 函数里面，可以根据这个 id 发送对应的请求，找到相应的内容。不过如果直接在内容页面刷新的话，就不会再显示内容了。因为没有执行 displayNode 函数 ... 执行这个函数也需要对应的节点 id 做为参数才能显示正确的内容。

解决方案

解决这个问题的方法可以这样... 在点击内容列表的时候，不去立即执行显示内容的函数，而是把当前点击的节点 id 存储到用户的浏览器里面，然后在内容页面显示的时候，先获取到存储在浏览器里的节点 id ，再用这个 id 作为参数去执行显示内容的函数。

这样即使我们再次的刷新页面 ... 也会先读取到浏览器里存储的节点 id ，然去调用显示内容的函数。也会显示出正确的内容。

实施

找到 loadArticleList 这个函数 ... 先注释掉执行 displayNode 函数的这行代码 ... 在这里，我们设置一下去存储当前点击的节点 id 到浏览器里面 ...

可以使用 localStorage ... 调用它的 setItem 去设置想要存储的东西 ... 可以先命名一下存储的数据的名字 ... 这里我们叫它 currentNode ... 具体要存储的值，就是上面获取到的节点的 id ...

localStorage.setItem("currentNode", nid);

再浏览到文件的底部 ... 先定义一个变量 .... 获取到存储在浏览器上的 currentNode ... 也就是用户所点击的节点的 id ...

currentNode = localStorage.getItem('currentNode');

然后在后面的 switch 语句里面，判断一下当前活动的页面是不是 node ，也就是显示内容的页面 ... 如果是的话 ... 判断一下 currentNode 是否有值 ... 如果有 ... 就去执行 displayNode 这个函数来显示内容 ... 调用它的时候，把获取到的存储在浏览器里面的节点 id 作为它的参数 ...

case 'node':
if (currentNode) {
displayNode(currentNode);
}
break;

预览

保存一下 ... 回到浏览器 ... 先回到应用的首页，刷新一下 ... 点击打开一个内容 ... 会在内容页面显示它 ... 打开 chrome 浏览器的开发者工具，打开资源选项卡，Local Storge ，在这里，你会看到存储在浏览器上的 currentNode ，还有它的值 ...

刷新一下 ... 现在，页面上仍然会显示这个内容 .. . 因为我们设置了，在刷新页面内容页面以后，去读取 currentNode 里的值，根据这个值，去调用显示内容的函数 ...