web storage简单小结（2015/08/20更新）

26 Sep 2014

关于cookie

1)可以通过window.navigator.cookieEnabled来判断该浏览器是否支持cookie

2）cookie的有效期默认是用户关闭浏览器，但是可以设置其max-age属性来延长其有效期，但是要告诉是多少秒，所以这三者对比应该是： sessionStorage(页面关)<cookie(浏览器关，但可设置期限)<localStorage(永久)，这三个都不跨浏览器，并且可以手动删除的。

3）默认情况下cookie和创建他的页面有关，在该页面和其同目录和子目录的其他页面可见。但是可以设置其path属性以达到共享cookie的目的。比如将路径设置为“/”,在整个域名下就都可见了。（有一个小技巧，在不设置path时，如果在一个web页面想读取同一站点的（这里对cookie仍然有cookie同源限制）其他页面中的cookie，只要在页面写一个隐藏的iframe加载进来，随后读取对应文档中的cookie即可。）

4）cookie属性的值不能是分号，逗号和空白符，所以在存储前要先encodeURIComponent()进行编码。

                //IE8及以上都可以使用
                //html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage
                //sessionStorage用于本地存储一个会话（session）中的数据,
                //在页面不关闭（刷新不会擦掉数据）的情况下，数据会一直存在。不跨页面
                //localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的，不跨浏览器
                //Cookie的大小是受限的(4kb)，http请求中始终带着，无形中浪费了带宽，get，set方法
                //需要自己封装
                //Web Storage拥有setItem,getItem,removeItem,clear等方法


                // //function group
                // //sessionStorage
                function saveSession(className){
                    var $value = $(className).val();
                    sessionStorage.setItem("message",$value);
                }
                function loadSession(className){
                    var $value = sessionStorage.getItem("message");
                    $(className).text($value);
                }

                //localStorage
                function saveLocal(className){
                    var $value = $(className).val();
                    localStorage.setItem("message",$value);
                }
                function loadLocal(className){
                    var $value = localStorage.getItem("message");
                    $(className).text($value);
                }

                //test code
                $(".save").click(function(event) {
                    /* Act on the event */
                    saveLocal(".inmess");
                });
                $(".get").click(function(event) {
                    /* Act on the event */
                    loadLocal(".message");
                });