本地存儲 localStorage/sessionStorage/cookie

時間 2019-11-09

標籤本地存儲 localstorage sessionstorage cookie 欄目網站開發简体版

原文原文鏈接

cookie是個基礎的東西。是服務器發送到客戶端，存儲在客戶端的一小段數據。能夠存儲一些配置信息，客戶標識信息等。
用戶下次訪問這個網站時，會把上次網站發來的cookie一同發送回去。
cookie保存在客戶端，服務器可以知道其中的信息。
session保存在服務器，客戶端不知道其中的信息； javascript

1、、h5以前，web本地存儲都是由cookie完成，缺點：不適合大量數據存儲2
與服務器的請求，速度慢，效率低。css

2、h5提供了兩種在客戶端存儲數據的新方法：
一、localStorage:無時間限制，除非手工刪除。
二、sessionStorage:會話存儲，瀏覽器關閉就銷燬了。html

localstorage是window的一個屬性，所以，一般都是寫window.localStorage，
存儲數據的方法就是直接給window.localStorage添加一個屬性，例如：
window.localStorage.a 或者 window.localStorage["a"]。它的讀取、寫、刪除
操做方法很簡單，是以鍵值對的方式存在的，以下：前端

localStorage.a = 3;//設置a爲"3"
localStorage["a"] = "sfsf";//設置a爲"sfsf"，覆蓋上面的值
localStorage.setItem("b","isaac");//設置b爲"isaac"
var a1 = localStorage["a"];//獲取a的值
var a2 = localStorage.a;//獲取a的值
var b = localStorage.getItem("b");//獲取b的值
localStorage.removeItem("c");//清除c的值
localStorage.clear(); // 清除了全部java

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。
除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。
可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生（來自@otakustay 的糾正）jquery

案例1web

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>.html</title>
<style>
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
localStorage.setItem("aa",$("#text").val());
});跨域

$("#btn2").click(function(){
$("#msg").html(localStorage.getItem("aa"));
});瀏覽器

});

</script>
</head>
<body>
<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
height: 100px;">
</div>
<input type="text" id="text" />
<button id="btn1" >
保存數據</button>
<button id="btn2">
讀取數據</button>
</body>
</html>服務器

案例2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea {
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div>
<h2>簡單的web存儲留言板</h2>
<textarea id="t1"></textarea>
<br />
<input type="button" class="button" onclick="addInfo()" value="留言" />
<input type="button" class="button" onclick="cleanInfo()" value="清除留言" />
<br />
<hr />
<label id="shows"></label>
<textarea id="show" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
//使用HTML5 Web存儲的localStorage方式進行編寫一個Web頁面。
//功能是一個簡易的Web留言板。留言板信息能夠永久保存。並能清楚留言板內容。參考頁面以下圖：

function addInfo() {
var info = window.document.getElementById("t1");
var lStorage = window.localStorage;
if (lStorage.myBoard) {
var date = new Date();
lStorage.myBoard += t1.value + "\n發表時間：" + date.toLocaleString() + "\n";
}
else {
var date = new Date();
lStorage.myBoard = t1.value + "\n發表時間：" + date.toLocaleString() + "\n";
}

upInfo();
}
function cleanInfo() {
window.localStorage.removeItem("myBoard");
upInfo();
}
upInfo();
</script>

</body></html>