1.调用localStorage
在一个标签页里面使用 localStorage.setItem(key,value)
添加(修改、删除)内容; 在另一个标签页里面监听 storage
事件。 即可得到 localstorge
存储的值,实现不同标签页之间的通信。
标签页1:
<input id="name"> <input type="button" id="btn" value="提交"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); localStorage.setItem("name", name); console.log("localStorage: name="+name); }); }); </script>
标签页2:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ window.addEventListener("storage", function(event){ console.log(event.key + "=" + event.newValue); }); }); </script>
2.调用cookie+setInterval()
将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。
页面1:
<input id="name"> <input type="button" id="btn" value="提交"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); document.cookie="name="+name; console.log("cookie: name="+name); }); }); </script>
页面2:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ function getCookie(key) { return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]; } setInterval(function(){ console.log("name=" + getCookie("name")); }, 3000); }); </script>
Web Storage (localStorage/sessionStorage)
- 保存数据:
sessionStorage.setItem(key,value);
sessionStorage.key = value;
sessionStorage[key] = value;
- 读取数据:只要网页时同源的,基于相同的键,我们都能够在其他网页中获得设置在sessionStorage上的数据。
sessionStorage.getItem(key);
sessionStorage.key;
sessionStorage[key];
- 存储的键值对的数量:
var length = sessionStorage.length;
- 删除单个数据:
sessionStorage.removeItem(key);
- 删除所有数据:
sessionStorage.clear();
- 获取指定位置的键:
sessionStorage.key(index);
Storage事件
无论何时,Storage 对象发生变化时(即创建/更新/删除数据项时,重复设置相同的键值不会触发该事件),StorageEvent事件会触发,与发生改变的窗口同源的每个窗口的window对象上都会触发Web Storage事件。
监听同源窗口的Storage事件:window.addEventListener("storage", displayStorageEvent)