HTML5本地存儲——localStorage
2014年2月26日HTML Standard
使用JqueryMobile開發手機端應用必然帶來頁面跳轉后的參數問題。
特別是同頁多PAGES的情況，JQM使用#pageid 來進行頁內跳轉，如果需要傳參數就斯巴達了，除非你喜歡SetCookie、GetCookie，或者是各種解析URL……
但既然使用JQM，代表你已經接受了HTML5。既然使用HTML5，那還搞那麼複雜，喜歡自虐咩？HTML5有localStorage以及sessionStorage兩種數據存儲方式，事實上并不是HTML5的特性，而是W3C Web Storeage的一部份。session的當然是會話級，持續到瀏覽器關閉；local的是持久化存儲，關閉瀏覽器仍舊存在。這裡只討論localStorage.
特別是同頁多PAGES的情況，JQM使用#pageid 來進行頁內跳轉，如果需要傳參數就斯巴達了，除非你喜歡SetCookie、GetCookie，或者是各種解析URL……
但既然使用JQM，代表你已經接受了HTML5。既然使用HTML5，那還搞那麼複雜，喜歡自虐咩？HTML5有localStorage以及sessionStorage兩種數據存儲方式，事實上并不是HTML5的特性，而是W3C Web Storeage的一部份。session的當然是會話級，持續到瀏覽器關閉；local的是持久化存儲，關閉瀏覽器仍舊存在。這裡只討論localStorage.
localStorage的接口：
- localStorage.getItem(key):獲取指定key的值
- localStorage.setItem(key,value):將value存入key
- localStorage.removeItem(key):删除指定key
運用十分簡單，如：A >> B 頁，跳轉前在A頁setItem，然後在B頁getItem，就可以了
實際使用的時候可以封裝一個小插件，內部代碼這樣寫：
//临时存储
var TempCache = {
cache: function (value) {
localStorage.setItem(“EasyWayTempCache”, value);
},
getCache: function () {
return localStorage.getItem(“EasyWayTempCache”);
},
setItem: function (key, value) {
localStorage.setItem(key, value);
},
getItem: function (key) {
return localStorage.getItem(key);
},
removeItem: function (key) {
return localStorage.removeItem(key);
}
};
那麼就可以：
TempCache.setItem(“test”,“這是測試的值“);//寫入
alert(TempCache.getItem(“test”));//讀取并彈出
這樣比寫cookie簡單方便許多…且不用url傳參解析。但是不要使用它去儲存敏感信息，大部份瀏覽器都是明文存儲它的！歡迎大家將賬號密碼用localStorage存在自己網站！謝謝！
发表评论或回复