- cookie保存在客户端用于存储服务器发给客户端的特殊信息。在使用中如果不设置过期时间,则cookie会保存在内从中会在浏览器关闭以后被清除。如果设置了过期时间,cookie会保存在硬盘中,直到时间过期才会被清除。(Cookie的大小会有限制,不能超过4K,Cookie只能以文本的方式保存字符串,不安全:其存储的值会随着页面的请求一同发往服务器)
- Session保存在服务器端,对存储的大小没有限制。
- HTML5中提供了两种存储方式:LocalStorage和SessionStorage,对存储的大小没有限制,只能用于存储字符串类型,不与服务器进行交互。
- LocalStorage:是永久性的存储,除非可以去删除,否则即使浏览器关闭或是页面关闭,存储的值依然存在。
- SessionStorage:其存储的值会在浏览器窗口关闭以后被销毁。
LocalStorage方法:
- .getItem(key)//用于获取key中所存储的值
- .setItem(key,value)//将value值存储在key中
- .removeItem(key)//移除key中存储的值
- 这里引用《h5移动web开发指南》上的话:“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发
- 练习 (A页面和B页面满足同源策略,A修改LocalStorage值,B会被触发)
A页面 <body> 请输入:<input type="text" value="" class="name" /> <button class="btn">提交</button> </body> <script src="./jquery-1.10.1.min.js"></script> <script> $(function() { $(".btn").click(function() { var name = $(".name").val(); console.log(name); localStorage.setItem("name", name); }) }) </script>
B页面 <body> <p class="a"></p> <p class="b"></p> </body> <script src="./jquery-1.10.1.min.js"></script> <script> $(function(){ window.addEventListener("storage",function(event){ var name=event.key; var value=event.newValue; $(".a").html(name); $(".b").html(value); console.log(event.key+"="+event.newValue); }) }) </script>