html5新增了本地儲存web Storage API,相較于cookies被限制在4KB,web Storage 有了更大的容量5MB。
web Storage 分為兩種:
1、sessionStorage 臨時保存,瀏覽器關閉即刪除;
2、localStorage 永久保存,除非手動刪除或者清空磁盤。
他們都有四個函數,分別是setItem、getItem、removeItem和clear。localStorage和sessionStorage 的語法都相同,這里只演示localStorage
localStorage.setItem(鍵名,鍵值) //存儲數據信息到本地
localStorage.getItem(鍵名) //讀取本地存儲的信息
localStorage.removeItem(鍵名) //刪除本地存儲的信息
localStorage.clear() //清空所以存儲的信息
//這四個函數的用法示例:
localStorage.setItem(鍵名,鍵值)
localStorage.getItem(鍵名)
localStorage.removeItem(鍵名)
localStorage.clear()
語法記這么簡單,接下來看看實例操作。
demo
sessionStorage
localStorage
當我們關閉瀏覽器重新打開
我們會發現session已經被清除,而localStorage還存在。
我們現在在success.html下獲取
success.html下獲取
獲得結果
提交JSON對象格式
結果
發現并不是我們想要的形式,原來他們的儲存形式都是以字符串的格式。
那么我們先轉化為字符串。
轉化為字符串
儲存結果
解析
結果
語法都一樣。自行測試吧。