关于此存储方式用法总体介绍可以参阅sessionStorage用法一章节。
本文专注于介绍一下如何实现sessionStorage存储数据的共享。
一.sessionStorage存储数据的特点：
localStorage存储的数据能够在客户端本地永久保存。
同域的任何页面都可以访问到localStorage存储的数据。
但sessionStorage与localStorage有着较大的不同，简述如下：
（1）.sessionStorage受到同源策略限制。
（2）.sessionStorage存储数据还受到浏览器选项卡的限制。
（3）.手动新开一个选项卡，即便同域同URL，也不会共享sessionStorage数据。
（4）.当前选项卡关闭，sessionStorage中存储的数据也随之被销毁。
二.数据共享方式：
首先要明确一个概念，在新选项卡或者窗口打开一个新的页面，会新创建一个sessionStorage会话。
上文阐述过，手动新开一个选项卡，即便同域同URL，也不会共享Sessionstorage数据。
但是并不是说就没有办法共享sessionStorage存储的数据，准确的说不是共享，而是拷贝一份。
（1）.通过手动方式新开一个选项卡或者窗口不会共享数据。
（2）.通过JavaScript或者链接标签打开同源页面会共享数据（准确说是拷贝一份），两者是独立的。
假设A页面通过sessionStorage存储一些数据，页面中有一个链接指向同源的B页面。
点击链接，在新的选项卡打开B页面，那么A页面的数据会被B页面共享（事实是拷贝了一份）。
两个页面的数据是相互独立的，在B页面删除一条记录，并不会影响A页面中的数据。
[HTML]纯文本查看复制代码运行代码
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8">
<metaname="author"content="http://www.softwhy.com/"/>
<title></title>
<script>
sessionStorage.setItem("name","");
sessionStorage.setItem("url","www.softwhy.com");
sessionStorage.setItem("address","青岛市南区");
</script>
</head>
<body>
<div></div>
B页面</>
</body>
</html>
对上述代码分析如下：
（1）.首先，添加三条本地存储数据。
（2）.然后，点击链接元素，跳转到同源的B.html页面。
（3）.此时，你会发现B页面拷贝了一份A页面的sessionStorage数据。
（4）.特别注意的是，这两份数据是完全独立的，各自的操作不会影响对方。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56326.shtml
