前端開發系列046-基礎篇之資料儲存
阿新 • • 發佈：2022-12-12
title: '前端開發系列046-基礎篇之資料儲存'
tags:
- 資料安全系列
categories: []
date: 2017-11-31 00:00:00
一、資料儲存技術(Cookie)簡單介紹
web儲存相關的技術：cookie | sessionStorage | localStorage | 應用快取
cookie是一種會話跟蹤技術，用於在進行網頁訪問的時候，儲存頁面中的某些資料資訊。
cookie的使用注意點
001 使用cookie來進行資料儲存的大小有限制，4KB 002 每個網頁中儲存cookie的個數（最多50）和每個網站中儲存cookie的個數都有限制（200） 003 各個不同的瀏覽器對cookie的數量也不相同 IE6.0：每個域為20個，大小為4095個位元組 IE7.0/8.0：每個域為50個 ，大小為4095個位元組 Opera：每個域為30個 ，4096個位元組 FF：每個域為50個 ，大小為4097個位元組 Safari：沒有個數限制，大小為4097個位元組 Chrome：每個域為53個，大小為4097個位元組 總結：在進行頁面cookie操作的時候，應該儘量保證cookie個數小於20個，總大小 小於4KB 004 cookie資料的過期時間 1）預設情況下，cookie儲存的內容是一次性的，它的有效期間是當前會話（需要把整個瀏覽器都關閉會話就結束） 2）設定過期時間：通過expires=time;的格式來進行指定設定之後沒超過過期時間則資料一直在。 005 cookie是不可以跨瀏覽器的(在IE中儲存的cookie, 不可以在火狐中使用) 006 cookie是不可以跨域的(跨域名) 示例：127.0.0.1/code/test.html 和127.0.0.1/code/test1.html可以訪問 網路請求的常見路徑： http://www.baidu.com:80/資源 協議://域名.字尾:埠號/資源 不能跨域的含義：就是隻有 （協議+域名+字尾+埠）號都相同才能相互訪問 http://www.baidu.com:80/a.html http://www.baidu.com:80/b.html 能 http://www.baidu.com:81/a.html http://www.baidu.com:80/b.html 不能（埠號不相同） http://mp3.baidu.com:80/a.html http://map.baidu.com:80/b.html 不能（二級域名不相同） https://www.baidu.com:80/a.html http://www.baidu.com:80/b.html 不能（協議不相同） http://www.bdu.com:80/a.html http://www.dbu.com:80/b.html 不能（以及域名不相同）
二、Cookie的設定和使用
設定方法
設定cookie資料：document.cookie = "name=zhangsan";
設定cookie資料和過期的時間：document.cookie = "name=zhangsan; expires="+date+";";
過期7天的設定：var date = new Date(); // date.setDate(date.getDate() + 7);
使用注意
在設定cookie的時候，一次只能設定一個數據（一個鍵值對），不能進行批量設定
錯誤的演示：window.cookie = "name=zhangsan&age=18";
//設定三個cookie的值，預設的過期時間是seesion（會話內） document.cookie = "name=wendingding"; document.cookie = "age=18"; document.cookie = "des=12345"; //設定cookie的值，並指定過期的時間 var date = new Date(); date.setDate(date.getDate() + 3); //3天的過期時間 //注意：在設定過期時間的時候，中間使用；分隔開發 document.cookie = "color=red;expires="+date; //刪除cookie //刪除cookie的原理：只要過期時間超過了當前的時間, 資料就會被刪除 date.setDate(date.getDate() + -1); document.cookie = "age=18; expires="+date+";";
Cookie操作的封裝
let Cookie = { getItem(name) { let cookies = document.cookie.split("; "); for (let i = 0; i < cookies.length; i++) { let arr = cookies[i].split("="); if (name == arr[0]) return arr[1]; } }, setItem(name, value, days) { if (days) { var date = new Date(); date.setDate(date.getDate() + days); document.cookie = `${name}=${value};expires=${date}`; } else { document.cookie = `${name}=${value}`; } }, removeItem(name) { this.setItem(name, null, -1); }, hasItem(name) { let keys = this.keys(); let flas = false; if (keys) { flas = keys.includes(name); } return flas; }, clear() { let keys = this.keys(); keys.forEach(ele => { this.removeItem(ele); }) }, keys() { let result = []; let cookies = document.cookie.split("; "); cookies.forEach(ele => { let arr = ele.split("="); result.push(arr[0]); }); return result; } }
三、sessionStorage技術簡單介紹
（1）在儲存使用者資料的時候，因為cookie可以儲存的資料比較小才4KB左右，所以也可以考慮使用sessionStorage來儲存，大小限制為2M左右
（2）該技術和localStorage是h5推出的，因此在使用的時候，需要考慮到相容性的問題
（3）相關資料：http://www.w3school.com.cn/html5/html_5_webstorage.asp
（4）簡單介紹和使用：
001 sessionStorage：會話儲存技術（session-會話）
002 該技術和cookie一樣，一樣瀏覽器退出了，那麼儲存的資料就會
003 sessionStorage技術的相關操作：新增|獲取|更新|刪除|清空
<input type="text">
<button class="btn1">新增</button>
<button class="btn2">獲取</button>
<button class="btn3">更新</button>
<button class="btn4">刪除</button>
<button class="btn5">清空</button>
<script>
window.sessionStorage.setItem("age","18");
window.sessionStorage.setItem("color","red");
window.sessionStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//新增操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//獲取操作
console.log(window.sessionStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//刪除操作
window.sessionStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.sessionStorage.clear();
};
</script>
四、localStorage技術簡單介紹
（1）簡單對比：儲存在本地 + 沒有時間限制
（2）大小比較：4K(cookie) - 5M(sessionStorage) - 20M(localStorage)
（3）使用方式和sessionStorage相同
<input type="text">
<button class="btn1">新增</button>
<button class="btn2">獲取</button>
<button class="btn3">更新</button>
<button class="btn4">刪除</button>
<button class="btn5">清空</button>
<script>
window.localStorage.setItem("age","18");
window.localStorage.setItem("color","red");
window.localStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//新增操作
window.localStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//獲取操作
console.log(window.localStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.localStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//刪除操作
window.localStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.localStorage.clear();
};
</script>
五、應用程式快取簡單介紹
簡單介紹：h5推出的應用程式快取，可以對Web頁面進行快取，並且可以在沒有網路的情況下進行訪問，所有主流瀏覽器均支援應用程式快取，除了 Internet Explorer，主要優點
1）支援離線瀏覽（沒有網路的情況下依然可以檢視）
2）速度更快，效能更好（使用快取檔案可以提高訪問的速度）
3）減輕伺服器端的壓力 - 瀏覽器將只從伺服器下載更新過或更改過的資源
程式碼和配置檔案演示
1）在頁面中載入資原始檔（圖片），除錯工具視窗選擇（none network）表示網路無法連線
2）新建立xx.appcache檔案，在該檔案配置要快取的內容
3）設定html頁面中的manifest屬性為配置檔案路徑
CACHE MANIFEST
CACHE:
# 需要快取的列表
0.jpg
NETWORK:
# 不需要快取的
1.jpg
FALLBACK:
# 訪問快取失敗後，備用訪問的資源