一、本地儲存
在HTML5誕生之前,網站如果想在瀏覽器端儲存數據,只能使用Cookie,使用Cookie有較多的限制。
Cookie問題:
1.cookie大小限制在4K左右(各個瀏覽器不一致)
2.cookie每次隨著HTTP請求都會一起發送(造成很多不需要的cookie也會一起發送)
本地儲存:
1.localStorage大小限制在5M(各個瀏覽器不一致)
2.localStorage不會隨著瀏覽器不一致)
2.localStorage不會隨著器不一致) 2.localStorage不會隨著這個瀏覽器不一致)## 2.localStorage HTTP請求一起傳送二、會話層級的本機儲存-
session
StoragesessionStorage:使用者瀏覽某個網站時,從進入網站開始一直到關閉網站,這就是session物件的有效期限。
sessionStorage提供了四種方法對本機儲存做相關操作。1. setItem( key, value )
;新增本機儲存資料2.getItem( key );透過key取得對應的value值
3.removeItem( key ); 透過key刪除
對應的value值4.clear() ;清空本地所有(限本網域下)session資料
1 <script type="text/javascript"> 2 //添加key-value 数据到 sessionStorage 3 sessionStorage.setItem("name", "怜白"); 4 sessionStorage.setItem("job", "前端"); 5 6 //通过key来获取value 7 var name = sessionStorage.getItem("name"); 8 9 console.log(name); // 怜白 10 console.log(sessionStorage.length); // 2 11 12 // 通过key删除value 13 sessionStorage.removeItem("job"); 14 15 console.log(sessionStorage.length); // 1 16 17 //清空所有的key-value数据。 18 sessionStorage.clear(); 19 20 console.log(sessionStorage.length); // 0 21 </script>
三、永久本機儲存-
localStoragelocalStorage:用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
localStorage提供了四種方法對本機儲存做相關操作。1. setItem( key, value )
;新增本機儲存資料2.getItem( key )
;透過key取得對應的value值3.removeItem( key )
; 透過key刪除對應的value值4.clear()
;清空本機所有資料<script type="text/javascript"> //添加key-value 数据到 sessionStorage localStorage.setItem("name", "怜白"); localStorage.setItem("job", "前端"); //通过key来获取value var name = localStorage.getItem("name"); console.log(name); // 怜白 console.log(localStorage.length); // 2 // 通过key删除value localStorage.removeItem("job"); console.log(localStorage.length); // 1 //清空所有的key-value数据。 localStorage.clear(); console.log(localStorage.length); // 0 </script>
四、總結
localStorage與sessionStorage 兩種差異就是一個暫時保存,一個長期保存。
你可能看過下面這種寫法:###<script type="text/javascript"> // 设置name localStorage.name = "怜白" // 删除name delete localStorage.name </script>### 上面直接賦值的方法確實可以實現功能,但是官方文件中將其定義為一種不###安全###的寫法,所以不要用這種寫法,使用localStorage提供的方法。 ###
以上是html5中LocalStorage本地儲存的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!