本地存儲(chǔ)
隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，同時(shí)也變得越來越復(fù)雜怕吴。為了滿足各種各樣的需求窍侧，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，HTML5規(guī)范提出了相關(guān)解決方案
- 本地存儲(chǔ)的特性：
- 數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中
- 設(shè)置转绷、讀取方便伟件，甚至頁面刷新不丟失數(shù)據(jù)
- 容量比較大，
sessionStorage約5M议经，localStorage約20M- 只能存儲(chǔ)字符串斧账，可以將對(duì)象JSON.stringify()編碼后存儲(chǔ)
sessionStorage數(shù)據(jù)的存儲(chǔ)以及獲取
- 生命周期為關(guān)閉瀏覽器窗口
- 在同一個(gè)窗口(頁面)下數(shù)據(jù)可以共享
- 以鍵值對(duì)的形式存儲(chǔ)使用
// window.可以省略
// 存儲(chǔ)數(shù)據(jù)
window.sessionStorage.setItem(key,value);
// 獲取數(shù)據(jù)
sessionStorage.getItem(key);
// 刪除數(shù)據(jù)
sessionStorage.removeItem(key);
// 清除所有數(shù)據(jù)
sessionStorage.clear();
<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>
let inp = document.querySelector('input'),
set = document.querySelector('.set'),
get = document.querySelector('.get'),
remove = document.querySelector('.remove'),
del = document.querySelector('.del');
// 存儲(chǔ)數(shù)據(jù)
set.addEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就可以把表單里的數(shù)據(jù)存儲(chǔ)起來
let val = inp.value;
sessionStorage.setItem('username',val);
sessionStorage.setItem('password',val);
});
// 獲取數(shù)據(jù)
get.taddEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就可以把表單里的數(shù)據(jù)獲取過來
sessionStorage.getItem('username');
});
// 刪除數(shù)據(jù)
remove.taddEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就把對(duì)應(yīng)的數(shù)據(jù)刪除掉
sessionStorage.removeItem('username');
});
// 清除所有數(shù)據(jù)
del.taddEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就清除所有的數(shù)據(jù)
sessionStorage.clear('username');
});
</script>
localStorage數(shù)據(jù)的存儲(chǔ)以及獲取
- 生命周期永久生效，除非手動(dòng)刪除煞肾，否則關(guān)閉頁面也會(huì)存在
- 可以多窗口(頁面)共享(同一瀏覽器可以共享)
- 以鍵值對(duì)的形式存儲(chǔ)使用
// 存儲(chǔ)數(shù)據(jù)
localStorage.setItem(key,value);
// 獲取數(shù)據(jù)
localStorage.getItem(key);
// 刪除數(shù)據(jù)
localStorage.removeItem(key);
// 清除所有數(shù)據(jù)
localStorage.clear();
<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>
let inp = document.querySelector('input'),
set = document.querySelector('.set'),
get = document.querySelector('.get'),
remove = document.querySelector('.remove'),
del = document.querySelector('.del');
// 存儲(chǔ)數(shù)據(jù)
set.addEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就可以把表單里的數(shù)據(jù)存儲(chǔ)起來
let val = inp.value;
localStorage.setItem('username',val);
localStorage.setItem('password',val);
});
// 獲取數(shù)據(jù)
get.taddEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就可以把表單里的數(shù)據(jù)獲取過來
console.log(localStorage.getItem('username'));
});
// 刪除數(shù)據(jù)
remove.taddEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就把對(duì)應(yīng)的數(shù)據(jù)刪除掉
localStorage.removeItem('username');
});
// 清除所有數(shù)據(jù)
del.taddEventListener('click',function() {
// 當(dāng)我們點(diǎn)擊了之后就清除所有的數(shù)據(jù)
localStorage.clear('username');
});
</local
sessionStorage和localStorage的區(qū)別
- 生命周期不同
- 數(shù)據(jù)的共享不同
