localStorage、sessionStorage、cookie的使用

RancherLabs 發布于2019-08-21 18:34 / 2035人閱讀

摘要：但同樣要注意，這幾個選項一定要舊保持一樣。所以當的和中含有這個特殊字符時，需要對其進行額外編碼，一般會用進行編碼，讀取時用進行解碼當然也可以用或者

記錄localStorage、sessionStorage和cookie的使用。

h5本地存儲： 介紹

localStorage
永久保存不同頁面和標簽頁可以共享關閉瀏覽器不會清除

sessionStorage
會話保存不同頁面和標簽頁不能共享關閉瀏覽器會清除

存儲內容：數組、圖片、json、樣式、腳本等只要能序列化為字符串的都可以
大小：每個域名5M
遇到的問題：SecurityError (DOM Exception 18): The operation is insecure.
需要在服務器狀態下使用，如果以file://狀態使用會DOM異常的錯誤

原型

clear()

getItem(key)

key(index)

length

removeItem(key)

setItem(key, data)

使用 setItem()

window.localStorage.setItem("name", "tanyue"); //設置名稱為“name”的值   關閉瀏覽器不會消失
window.localStorage.setItem("email", "tanyuetz163.com"); //設置名稱為“email”的值   關閉瀏覽器不會消失
window.sessionStorage.setItem("email", "tanyuetz163.com"); //獲取名稱為“email”的值   關閉瀏覽器消失

getItem()

var local = window.localStorage.getItem("name"); //獲取name的值
var session = window.sessionStorage.getItem("email"); //獲取email的值
console.log(local);
console.log(session);

遍歷

var storage = window.localStorage;
    for (var i = 0, len = storage.length; i < len; i++) {
      var key = storage.key(i);
      var value = storage.getItem(key);
      console.log(key + "=" + value);
    }

removeItem()

window.localStorage.removeItem("name"); //移除name屬性
window.sessionStorage.removeItem("email"); //移除email屬性

clear()

window.localStorage.clear(); //清除localStorage

cookie

當網頁要發送http請求時，瀏覽器會首先檢查是否有相應的cookie,有則自動添加在request header中的cookie字段中。這些是瀏覽器自動幫我們做的，而且每一次http請求瀏覽器都會自動添加cookie,因此身份驗證信息會很適合放置在cookie中

大小：
每個個域名下大小為4k,每個域名下數量最多為20個

設置cokie:
`"key=name; expires=Thu, 25 Feb 2017 04:18:00 GMT;
domain=xxx.xxx.com; path=/; secure; HttpOnly"`(屬性之間用分號和空格隔開)

方法：

document.cookie = "name=Jonh; age=12; class=111";
//不能通過這種方式設置多個cookie

//只能通過這種多次添加的方式設置cookie
document.cookie = "name=abc";
document.cookie = "age=22";
//修改cookie  重新賦值
document.cookie = "class=222";
//刪除刪除 cookie
//刪除一個cookie 也挺簡單，也是重新賦值，只要將這個新cookie的expires 選項設置為一個過去的時間點就行了。但同樣要注意，path/domain/這幾個選項一定要舊cookie 保持一樣。
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = "name=Jonh; expires=" + date.toGMTString();
//cookie編碼
// cookie其實是個字符串，但這個字符串中逗號、分號、空格被當做了特殊符號。所以當cookie的 key 和 value 中含有這3個特殊字符時，需要對其進行額外編碼，一般會用escape進行編碼，讀取時用unescape進行解碼；當然也可以用encodeURIComponent/decodeURIComponent或者encodeURI/decodeURI

GPU云服務器云服務器 cookie的使用 localstorage使用 cookie使用 cookie如何使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90605.html

詳說 Cookie, LocalStorage 與 SessionStorage

摘要：顧名思義，確實非常小，它的大小限制為左右，是網景公司的前雇員在年月的發明。是標準中新加入的技術，它并不是什么劃時代的新東西。特性與的接口類似，但保存數據的生命周期與不同。但當頁面關閉后，中的數據就會被清空。本文最初發布于我的個人博客：咀嚼之味最近在找暑期實習，其中百度、網易游戲、阿里的面試都問到一些關于HTML5的東西，問題大多是這樣開頭的：你用過什么HTML5的技術呀？...

endless_road 2019-08-21 10:31 評論0 收藏0
cookie、Sessionstorage、Localstorage快速上手

摘要：快速上手先說區別數據大小不能超過。可以在后端設置修改，數據僅在本地瀏覽器保存。數據存儲在瀏覽器僅在瀏覽器為關閉的狀態，關閉窗口后數據就會銷毀。默認情況下，屬于當前頁面。 cookie、Sessionstorage、Localstorage快速上手先說區別 cookie: 數據大小不能超過4KB。不管是否有需求，cookie數據都會在HTTP請求中攜帶，在瀏覽器和服務器中來回傳遞，...

duan199226 2019-08-20 17:49 評論0 收藏0
localStorage、sessionStorage、Cookie的區別及用法

摘要：的區別及用法是本地存儲，存儲在客戶端，包括和。僅在當前會話下有效，關閉頁面或瀏覽器后被清除。源生接口可以接受，亦可再次封裝來對和有更好的支持。但需要程序員自己封裝，源生的接口不友好。每個最多只能有條，每個長度不能超過。 localStorage、sessionStorage、Cookie的區別及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 評論0 收藏0
cookie、Sessionstorage、Localstorage快速上手

摘要：快速上手先說區別數據大小不能超過。可以在后端設置修改，數據僅在本地瀏覽器保存。數據存儲在瀏覽器僅在瀏覽器為關閉的狀態，關閉窗口后數據就會銷毀。默認情況下，屬于當前頁面。 cookie、Sessionstorage、Localstorage快速上手先說區別 cookie: 數據大小不能超過4KB。不管是否有需求，cookie數據都會在HTTP請求中攜帶，在瀏覽器和服務器中來回傳遞，...

Galence 2019-08-20 17:49 評論0 收藏0