HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方(HTML 5 Web 存儲(chǔ))：
- localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
localstroage
localstorage按照對(duì)象的形式存儲(chǔ)數(shù)據(jù)拷邢，因此其key只能為字符串，共包含5個(gè)常用的API.
- setItem
- getItem
- removeItem
- length
- clear
如下的代碼執(zhí)行
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="UXDC"/>
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="HandheldFriendly" content="true">
<meta name="format-detection" content="telephone=no" />
<title>滴滴企業(yè)版</title>
<script type="text/javascript">
// html localstroage
var localstroage = window.localStorage;
// set item
localstroage.setItem('username', 'lijincai');
localstroage.setItem('openid','ksjhfkjajkdfjkszdjfksad');
localstroage.setItem('uid','10001');
console.log(localstroage);
// get item
localstroage.getItem('username');
// remove item
localstroage.removeItem('openid');
console.log(localstroage)
// length
console.log(localstroage.length);
// clear
localstroage.clear();
console.log(localstroage)
</script>
</head>
<body>
<div id="jqueryId">test</div>
</body>
</html>
我們可以得到如下的運(yùn)行結(jié)果平斩，
localstorage運(yùn)行結(jié)果
對(duì)于瀏覽不支持localstorage亚享，可以使用cookie來(lái)模擬localstorage,可以參見(jiàn)LocalStorage
session localstroage
sessionStorage的api與使用和localstorage類似咽块，但是 sessionStorage只存在回話中绘面，會(huì)隨著窗口的關(guān)閉而關(guān)閉。
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="UXDC"/>
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="HandheldFriendly" content="true">
<meta name="format-detection" content="telephone=no" />
<title>滴滴企業(yè)版</title>
<script type="text/javascript">
// html localstroage
var sessionstorage = window.sessionStorage;
// set item
sessionstorage.setItem('username', 'lijincai');
sessionstorage.setItem('openid','ksjhfkjajkdfjkszdjfksad');
sessionstorage.setItem('uid','10001');
console.log(sessionstorage);
// get item
console.log(sessionstorage.getItem('username'));
// remove item
sessionstorage.removeItem('openid');
console.log(sessionstorage)
// length
console.log(sessionstorage.length);
// clear
// sessionstorage.clear();
// console.log(sessionstorage)
</script>
</head>
<body>
<div id="jqueryId">test</div>
</body>
</html>
運(yùn)行結(jié)果
同域下測(cè)試
