javascript
八、前端开发-JavaScript 客户端存储
八、前端開發語言體系-JavaScript 客戶端存儲
文章目錄
- 八、前端開發語言體系-JavaScript 客戶端存儲
- JavaScript 客戶端存儲
- 客戶端存儲簡介
- Cookie
- LocalStorage
- SessionStorage
- 參考文章
JavaScript 客戶端存儲
客戶端存儲簡介
在前端開發過程中，為了與服務器更方便的交互或者提升用戶體驗，我們都會在客戶端（用戶）本地保存一部分數據。Web應用允許使用瀏覽器提供的 API 實現將數據存儲到用戶的電腦上。
客戶端存儲的方案：
傳統：
- Cookie：把信息存儲到客戶端的瀏覽器中（但是項目服務器端也是可以獲取COOKIE的）
- Session：把信息存儲到服務器上的（服務器存儲）
HTML5：WebStorage
- LocalStorage：永久存儲在客戶端的本地
- SessionStorage：信息的會話存儲，會話窗口存在信息也存在，會話窗口關閉信息就消失了（針對 Session 的數據存儲）
我們可以認為，傳統的 Session 存儲會被 SessionStorage 所替代，這里不再對它進行介紹。
Cookie
Cookie是指Web瀏覽器存儲的少量數據，用于瀏覽器存儲會話信息，每個Cookie的大小一般不能超過4KB。cookie默認的有效期很短暫，它只能持續在Web瀏覽器的會話期間，一旦用戶關閉瀏覽器，cookie保存的數據就會丟失。
Cookie保存以下幾方面的信息：
- Cookie的名字
- Cookie的值
- 到期時間
- 所屬域名（默認是當前域名）
- 生效的路徑（默認是當前網址）
Cookie的值必須寫成“key=value”的形式，等號兩邊不能有空格。而且在寫入Cookie的時候，必須對分號、逗號和空格進行轉義（它們都不允許作為Cookie的值）。
document.cookie屬性是可寫的，可以通過它為當前網站添加Cookie。document.cookie一次只能寫入一個Cookie，這個寫入并不是覆蓋，而是添加。
如果要延長cookie的有效期，就需要設置max-age屬性來指定cookie的有效期（單位是秒）
document.cookie = 'test1=hello'; document.cookie = 'test2=world'; document.cookie = 'user=TG;max-age=606024'; //將有效期設置為一天 document.cookie //讀取當前頁面的所有cookie // test1=hello; test2=world; user=TG除了Cookie本身的內容，還有一些可選的屬性也是可以寫入的，它們都必須以分號分隔。
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure][; max-age=number]- value屬性
- value屬性是必需的。它是一個鍵值對，用于指定Cookie的值
- expires屬性
- expires屬性用于指定Cookie過期時間。如果不設置該屬性，或者設為null，Cookie只在當前會話有效，瀏覽器窗口一旦關閉，該Cookie就會被刪除。
- domain屬性
- domain屬性指定Cookie所在的域名。如果未指定，默認為設定該Cookie的域名，所指定的域名必須是當前發送Cookie的域名的一部分。
- 只有訪問的域名匹配domain屬性，Cookie才有可能發送到服務器。
- path屬性
- path屬性用來指定cookie存儲路徑，必須是絕對路徑，如果未指定，默認為請求該Cookie的網頁路徑。
- path屬性生效的前提是domain屬性匹配。只有path屬性匹配向服務器發送的路徑，Cookie才會發送。（這里的匹配不是絕對匹配，而是從根路徑開始，只要path屬性匹配發送路徑的一部分，就可以發送。）
- secure屬性
- secure屬性用來指定Cookie只能在加密協議HTTPS下發送到服務器。
- 該屬性只是一個開關，不需要指定值。如果通信是HTTPS協議，該開關自動打開。
- max-age屬性
- max-age屬性用來指定Cookie有效期，以秒為單位。
瀏覽器對Cookie數量的限制，規定不一樣。目前，Firefox是每個域名最多設置50個Cookie，而Safari和Chrome沒有域名數量的限制。
所有Cookie的累加長度限制為4KB。超過這個長度的Cookie，將被忽略，不會被設置。
Cookie實例：
function setCookie(cname, cvalue, exdays) {//創建cookie，三個參數分別為：鍵、值、保存的天數var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires="+d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }function getCookie(cname) {//查找鍵為“cname”的cookievar name = cname + "=";var ca = document.cookie.split(';');for(var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(1);}if (c.indexOf(name) == 0) {return c.substring(name.length, c.length);}}return ""; } function delCookie(cname){//刪除鍵為“cname”的cookie/*刪除 cookie 非常簡單，不必指定 cookie 值，直接把 expires參數設置為過去的日期即可*/var exp = new Date();exp.setTime(exp.getTime() - 1);var cval=getCookie(name);if(cval!=null)document.cookie= cname + "="+cval+";expires="+exp.toGMTString(); }setCookie("name","bolly",10); getCookie("name"); delCookie("name");LocalStorage
優勢：
局限:
LocalStorage 的使用也是遵循同源策略的，所以不同的網站是不能共用相同的 LocalStorage。
LocalStorage創建的是一個本地存儲的 name/value 對，寫入和讀取各自有三種方式，官方推薦使用 setItem\getItem 這兩種方法對其進行存取。
//寫入 localStorage.setItem('user',101);//存儲一個以“user”為名字的值 localStorage["user"] = 101; localStorage.user = 101;//讀取 localStorage.getItem('user'); //讀取以“user”為名字的值 localStorage["user"] localStorage.user建立了 LocalStorage 數據之后，我們可以使用 removeItem( ) 和 clear( ) 方法來刪除。
localStorage.removeItem('user');//刪除名為“user”的數據。 localStorage.clear(); //刪除所有存儲的數據LocalStorage 中有一個 key( ) 方法可以根據索引獲取到當前的鍵值，一般用于遍歷存儲數據。
for(var i=0; i < localStorage.length; i++){ var name = localStorage.key(i); //獲取第 i對的名字 var datas = localStorage.getItem(name); //獲取該對的值 }因為 LocalStorage 存儲的是 String 對象，如果我們想把 JSON 對象存入的話必須進行轉換。
- JSON.stringify( ) 方法可以將 JSON 對象轉換成為 JSON 字符串
- JSON.parse( ) 方法可以將 JSON 字符串轉換成為 JSON 對象
SessionStorage
Storage對象是一個持久化關聯數組，數組使用字符串來索引，存儲的值都是字符串形式的。LocalStorage和SessionStorage這兩個屬性都代表同一個Storage對象。
LocalStorage和SessionStorage的區別在于存儲的有效期和作用域的不同。
- LocalStorage存儲的數據是永久性的，除非主動刪除，否則數據一直留在用戶的電腦中。
- LocalStorage的作用域是限定在文檔源（document origin）級別。同源的文檔間共享同樣的localStorage數據。
- SessionStorage用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
- SessionStorage的作用域同樣是限定在文檔源中，不過它被限定在窗口中。也就是說，如果同源的文檔在不同的瀏覽器標簽頁中，那它們互相之間擁有的是各自的SessionStorage數據，無法共享。如果一個瀏覽器標簽頁包含多個元素，它們包含的文檔是同源的，兩者之間的SessionStorage是可共享的。
SessionStorage 的用法和 LocalStorage 完全一致，參照 LocalStorage 進行使用即可。
參考文章
js基礎-客戶端存儲（Cookie、Storage、IndexedDB）
基于js 本地存儲(詳解)
W3School-JavaScript Cookies
前端開發的客戶端本地存儲
Window localStorage 屬性
總結
以上是生活随笔為你收集整理的八、前端开发-JavaScript 客户端存储的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 七、前端开发-JavaScript HT
- 下一篇： 九、前端开发框架