访问localStorage的3种方法：
1 Storage对象的setItem和getItem方法
存储使用setItem方法,其格式如下
window.localStorage.setItem(key,value);
如：window.localStorage.setItem("userdata"," Hello!HTML5");
读取使用getItem方法,其格式如下：
window.localStorage.getItem(key);
如：window.localStorage.getItem("userdata");
2 数组索引
存储语法如下：
window.localStorage["userdata"] = "Hello!HTML5";读取语法如下：
var value = window.localStorage["userdata"];3 属性
存储语法如下：
window.localStorage.userdata = "Hello!HTML5";读取语法如下：
var value = window.localStorage.userdata;实例：
<!DOCTYPE html>
<html>
<head>
<title>ch11_01</title>
<link rel=stylesheet type="text/css" href="color.css">
<script type="text/javascript">
function onLoad() {
if(typeof(Storage)=="undefined")
{
alert("Sorry!!你的浏览器不支持Web Storage");
}else{
btn_save.addEventListener("click", saveToLocalStorage);
btn_load.addEventListener("click", loadFromLocalStorage);
}
}
function saveToLocalStorage(){
localStorage.username = document.getElementById("inputname").value;
}
function loadFromLocalStorage(){
document.getElementById("show_LocalStorage").innerHTML= localStorage.username+" 你好～欢迎来到我的网站～";
}
</script>
</head>
<body>
<body onload="onLoad()">
<img src="images/welcome.jpg" /><br />
请输入你的姓名：<input type="text" id="inputname" value=""><br />
<div id="show_LocalStorage"></div><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
</body>
</body>
</html>删除loaclStorage
要删除某一条localStorage数据,可以调用removeItem方法或者delete属性进行删除
window.localStorage.removeItem("userdata");
delete window.localStorage.userdata;
delete window.localStorage["userdata"];
要想删除localStorage全部数据,可以使用clear()方法。
localStorage.clear();
实例：
<!DOCTYPE html>
<html>
<head>
<title>ch11_02</title>
<link rel=stylesheet type="text/css" href="color.css">
<script type="text/javascript">
function onLoad() {
if(typeof(Storage)=="undefined")
{
alert("Sorry!!你的浏览器不支持Web Storage");
}else{
btn_save.addEventListener("click", saveToLocalStorage);
btn_load.addEventListener("click", loadFromLocalStorage);
btn_clear.addEventListener("click", clearLocalStorage);
}
}
function saveToLocalStorage(){
localStorage.username = inputname.value;
}
function loadFromLocalStorage(){
show_LocalStorage.innerHTML= localStorage.username+" 你好～欢迎来到我的网站～";
}
function clearLocalStorage(){
localStorage.clear();
show_LocalStorage.innerHTML= localStorage.username;
}
</script>
</head>
<body>
<body onload="onLoad()">
<img src="images/welcome.jpg" /><br />
请输入你的姓名：<input type="text" id="inputname" value=""><br />
<div id="show_LocalStorage"></div><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
<button id="btn_clear">清除localStorage数据</button>
</body>
</body>
</html>