隨著互聯(lián)網(wǎng)的快速發(fā)展洪规，基于網(wǎng)頁(yè)的應(yīng)用越來(lái)越普遍，同時(shí)也變的越來(lái)越復(fù)雜循捺，為了滿足各種各樣的需求斩例，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，HTML5規(guī)范提出了相關(guān)解決方案巨柒。
本地存儲(chǔ)特性
1樱拴、數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中
2、設(shè)置洋满、讀取方便晶乔、甚至頁(yè)面刷新不丟失數(shù)據(jù)
3、容量較大牺勾，sessionStorage約5M正罢、localStorage約20M
4、只能存儲(chǔ)字符串驻民，可以將對(duì)象JSON.stringify() 編碼后存儲(chǔ)
window.sessionStorage
1.生命周期為關(guān)閉瀏覽器窗口
2.在同一個(gè)窗口(頁(yè)面)下數(shù)據(jù)可以共享
3..以鍵值對(duì)的形式存儲(chǔ)使用
存儲(chǔ)數(shù)據(jù)： sessionStorage.setItem(key, value)
獲取數(shù)據(jù)： sessionStorage.getItem(key)
刪除數(shù)據(jù)： sessionStorage.removeItem(key)
刪除所有數(shù)據(jù)： sessionStorage.clear()
<body>
<input type="text">
<button class="set">存儲(chǔ)數(shù)據(jù)</button>
<button class="get">獲取數(shù)據(jù)</button>
<button class="remove">刪除數(shù)據(jù)</button>
<button class="del">清空所有數(shù)據(jù)</button>
<script>
console.log(localStorage.getItem('username'));
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
// 當(dāng)我們點(diǎn)擊了之后翻具，就可以把表單里面的值存儲(chǔ)起來(lái)
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
});
get.addEventListener('click', function() {
// 當(dāng)我們點(diǎn)擊了之后，就可以把表單里面的值獲取過(guò)來(lái)
console.log(sessionStorage.getItem('uname'));
});
remove.addEventListener('click', function() {
//
sessionStorage.removeItem('uname');
});
del.addEventListener('click', function() {
// 當(dāng)我們點(diǎn)擊了之后回还，清除所有的
sessionStorage.clear();
});
</script>
</body>
window.localStorage
1.生命周期永久生效裆泳，除非手動(dòng)刪除 否則關(guān)閉頁(yè)面也會(huì)存在
2.可以多窗口（頁(yè)面）共享（同一瀏覽器可以共享）
3.以鍵值對(duì)的形式存儲(chǔ)使用
存儲(chǔ)數(shù)據(jù)：localStorage.setItem(key, value)
獲取數(shù)據(jù)：localStorage.getItem(key)
刪除數(shù)據(jù)：localStorage.removeItem(key)
刪除所有數(shù)據(jù)：localStorage.clear
<body>
<input type="text">
<button class="set">存儲(chǔ)數(shù)據(jù)</button>
<button class="get">獲取數(shù)據(jù)</button>
<button class="remove">刪除數(shù)據(jù)</button>
<button class="del">清空所有數(shù)據(jù)</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
var val = ipt.value;
localStorage.setItem('username', val);
})
get.addEventListener('click', function() {
console.log(localStorage.getItem('username'));
})
remove.addEventListener('click', function() {
localStorage.removeItem('username');
})
del.addEventListener('click', function() {
localStorage.clear();
})
</script>
</body>
Cookie
這個(gè)恐怕是最常見(jiàn)也是用得最多的技術(shù)了，也是比較古老的技術(shù)了柠硕。COOKIE優(yōu)點(diǎn)很多工禾，使用起來(lái)很方便 ,但它的缺點(diǎn)也很多： 比如跨域訪問(wèn)問(wèn)題；無(wú)法保存太大的數(shù)據(jù)（最大僅為4KB）蝗柔；本地保存的數(shù)據(jù)會(huì)發(fā)送給服務(wù)器闻葵，浪費(fèi)帶寬 等等.
