一、本地儲存
在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>以上是html5中LocalStorage本地儲存的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
