目录
1. 浏览器兼容性
2. localStorage
3. sessionStorage
Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。Web Storage 包含如下两种机制:
1. 浏览器兼容性
2. localStorage
API:
localStorage.setItem('myCat', 'Tom'); // 增加一个 localStorage 项
let cat = localStorage.getItem('myCat'); // 读取 localStorage 项
localStorage.removeItem('myCat'); // 移除 localStorage 项
localStorage.clear(); // 清空所有 localStorage 项
示例:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Web Storage API example</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<h1>Web storage</h1>
<p>This example is designed to demonstrate usage of the <a href="http://dev.w3.org/html5/webstorage/">W3C Web Storage API</a>. It should work as far back as IE8. Choose custom background colours, logos and fonts from the below drop down menus, then try closing and reopening the page — you will find that your choices are remembered, as they are stored using Web Storage. You can also visit the <a href="event.html" target="_blank">storage event output</a> (opens in new tab). Open this, change some values in the index page, then look at the events page — you'll see the storage changes reported.</p>
<form>
<div>
<label for="bgcolor">Choose background color:</label>
<input class="color" id="bgcolor" value="FF0000">
</div>
<div>
<label for="font">Choose font style:</label>
<select id="font">
<option value="'Open Sans Condensed', sans-serif" selected>Sans-serif</option>
<option value="'Bitter', serif">Serif</option>
<option value="'Ubuntu Mono'">Monospace</option>
</select>
</div>
<div>
<label for="image">Choose image:</label>
<select id="image">
<option value="images/firefoxos.png" selected>Firefox</option>
<option value="images/crocodile.png">Crocodile</option>
<option value="images/tortoise.png">Tortoise</option>
</select>
</div>
</form>
<footer></footer>
<img src="images/firefoxos.png">
</div>
</body>
<script src="jscolor/jscolor.js"></script>
<script src="main.js"></script>
</html>
main.js:
var htmlElem = document.querySelector('html');
var pElem = document.querySelector('p');
var imgElem = document.querySelector('img');
var bgcolorForm = document.getElementById('bgcolor');
var fontForm = document.getElementById('font');
var imageForm = document.getElementById('image');
if(!localStorage.getItem('bgcolor')) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
localStorage.setItem('font', document.getElementById('font').value);
localStorage.setItem('image', document.getElementById('image').value);
setStyles();
}
function setStyles() {
var currentColor = localStorage.getItem('bgcolor');
var currentFont = localStorage.getItem('font');
var currentImage = localStorage.getItem('image');
document.getElementById('bgcolor').value = currentColor;
document.getElementById('font').value = currentFont;
document.getElementById('image').value = currentImage;
htmlElem.style.backgroundColor = '#' + currentColor;
pElem.style.fontFamily = currentFont;
imgElem.setAttribute('src', currentImage);
}
bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;
3. sessionStorage
sessionStorage 的工作方式和 localStorage 很接近,不同之处在于储存数据的有效期与作用域;
共享 sessionStorage 数据
示例:sessionStorage 存储应用状态;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
Counter: <input id="counter" value="0" disabled />
<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<hr/>
<button onclick="windowOpenNew()">window.open</button>
<a href="./html.html" target="_self">href</a>
<script>
function windowOpenNew(){
window.open("./html.html");
}
</script>
<script>
function add(){
const o = document.getElementById("counter");
o.value = Number(o.value)+1;
save(o.value);
}
function sub(){
const o = document.getElementById("counter");
o.value = Number(o.value)+1;
save(o.value);
}
function save(v){
sessionStorage.setItem("counter", v);
}
function restore(){
const o = document.getElementById("counter");
o.value = sessionStorage.getItem("counter");
}
window.onload = function(){
restore();
}
</script>
</body>
</html>