一、本地存儲(chǔ)
在HTML5誕生之前，網(wǎng)站如果想在瀏覽器端存儲(chǔ)數(shù)據(jù)，只能使用Cookie，使用Cookie有較多的限制。
Cookie問(wèn)題：
1.cookie大小限制在4K左右(各個(gè)瀏覽器不一致)
2.cookie每次隨著HTTP請(qǐng)求都會(huì)一起發(fā)送（造成很多不需要的cookie也會(huì)一起發(fā)送）
本地存儲(chǔ)：
1.localStorage大小限制在5M(各個(gè)瀏覽器不一致)
2.localStorage不會(huì)隨著HTTP請(qǐng)求一起發(fā)送
二、會(huì)話級(jí)別的本地存儲(chǔ)-sessionStorage
sessionStorage:用戶瀏覽某個(gè)網(wǎng)站時(shí)，從進(jìn)入網(wǎng)站開(kāi)始一直到關(guān)閉網(wǎng)站，這就是session對(duì)象的有效期。
sessionStorage提供了四種方法對(duì)本地存儲(chǔ)做相關(guān)操作。
- setItem( key, value )；添加本地存儲(chǔ)數(shù)據(jù)
2.getItem( key )；通過(guò)key獲取相應(yīng)的value值
3.removeItem( key )； 通過(guò)key刪除相應(yīng)的value值
4.clear()；清空本地所有（限本域名下）session數(shù)據(jù)
<script type="text/javascript"> 2
//添加key-value 數(shù)據(jù)到sessionStorage
sessionStorage.setItem("name", "螢火蟲(chóng)de夢(mèng)");
sessionStorage.setItem("job", "前端");
//通過(guò)key來(lái)獲取value
var name = sessionStorage.getItem("name");
console.log(name);
console.log(sessionStorage.length);
// 通過(guò)key刪除value
sessionStorage.removeItem("job");
console.log(sessionStorage.length);
//清空所有的key-value數(shù)據(jù)。
sessionStorage.clear();
console.log(sessionStorage.length);
</script>
三、永久本地存儲(chǔ)-localStorage
localStorage:用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
localStorage提供了四種方法對(duì)本地存儲(chǔ)做相關(guān)操作。
- setItem( key, value )；添加本地存儲(chǔ)數(shù)據(jù)
2.getItem( key )；通過(guò)key獲取相應(yīng)的value值
3.removeItem( key )； 通過(guò)key刪除相應(yīng)的value值
4.clear()；清空本地所有數(shù)據(jù)
<script type="text/javascript"> 2
//添加key-value 數(shù)據(jù)到 sessionStorage
localStorage.setItem("name", "螢火蟲(chóng)de夢(mèng)");
localStorage.setItem("job", "前端");
//通過(guò)key來(lái)獲取value
var name = localStorage.getItem("name");
console.log(name);
console.log(localStorage.length);
// 通過(guò)key刪除value
localStorage.removeItem("job");
console.log(localStorage.length);
//清空所有的key-value數(shù)據(jù)。
localStorage.clear();
console.log(localStorage.length);
</script>
四、總結(jié)
localStorage與sessionStorage 兩種區(qū)別就是一個(gè)臨時(shí)保存，一個(gè)長(zhǎng)期保存。
你可能見(jiàn)過(guò)下面這種寫(xiě)法：
<script type="text/javascript">
//設(shè)置name3
localStorage.name = "螢火蟲(chóng)de夢(mèng)"
// 刪除name
delete localStorage.name
</script>
上面直接賦值的方法確實(shí)可以實(shí)現(xiàn)功能，但是官方文檔中將其定義為一種不安全的寫(xiě)法，所以不要用這種寫(xiě)法，使用localStorage提供的方法。
