<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5中的web存储</title>
<style>
div {
width:200px;
height:100px;
position:relative;
top:10px;
left:10px;
background:red;
}
</style>
<script>
//1.判断该浏览器是否支持localStorage localStorage中的数值可以存储到任何时候,并且重新打开浏览器该数据不会置空
//function isSupportLocalStorage() {
// var nme = document.getElementById("n");
// if (window.localStorage) {
// //alert("该浏览器支持本地存储");
// window.localStorage.setItem("LastName", "Smith");
// alert(window.localStorage.getItem("LastName"));
// alert(nme);
// nme.innerText = "LastName:" + window.localStorage.getItem("LastName");
// }
// else {
// nme.innerHTML ="该浏览器不支持本地存储";
// }
//}
//计算按钮的点击数据
//function cacluteNumber() {
// //window.localStorage.removeItem("number");
// alert("计算开始");
// //获取要显示计数的文本框
// var showNum = document.getElementById("showNumber");
// //判断本地缓存中是否有要计算的数字,没有则创建,有则追加
// if(window.localStorage.getItem("number")==null){
// //创建number这个键值对并储存在本地
// window.localStorage.setItem("number", 1);
// }
// else if (window.localStorage.getItem("number") != null) {
// //如果本地已经存在这个键值对,则取出该键值对并将值转换成int类型,加一后再存入本地
// var num = window.localStorage.getItem("number");
// num++;
// window.localStorage.setItem("number",num);
// }
// showNum.value = window.localStorage.getItem("number");
// alert(showNum.value);
//}
//2.通过sessionStorage存储数据 注意:sessionStorage在每次重新打开网页时该数据置空
function cacluteNumber() {
//判断是否支持sessionStorage存储
var showNum = document.getElementById("showNumber");
if (window.sessionStorage != null) {
alert("该浏览器支持sessionStorage存储");
if (window.sessionStorage.getItem("number") == null) {
window.sessionStorage.setItem("number", 1);
}
else {
window.sessionStorage.setItem("number", parseInt(window.sessionStorage.getItem("number")) + 1);
}
showNum.value=window.sessionStorage.getItem("number");
}
else {
alert("该浏览器不支持sessionStorage存储");
}
}
</script>
</head>
<body οnlοad="isSupportLocalStorage()">
<!--<div id="n"></div>-->
点击按钮的次数为: <input type="text" id="showNumber"/><br />
<button οnclick="cacluteNumber()">计算</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5中的web存储</title>
<style>
div {
width:200px;
height:100px;
position:relative;
top:10px;
left:10px;
background:red;
}
</style>
<script>
//1.判断该浏览器是否支持localStorage localStorage中的数值可以存储到任何时候,并且重新打开浏览器该数据不会置空
//function isSupportLocalStorage() {
// var nme = document.getElementById("n");
// if (window.localStorage) {
// //alert("该浏览器支持本地存储");
// window.localStorage.setItem("LastName", "Smith");
// alert(window.localStorage.getItem("LastName"));
// alert(nme);
// nme.innerText = "LastName:" + window.localStorage.getItem("LastName");
// }
// else {
// nme.innerHTML ="该浏览器不支持本地存储";
// }
//}
//计算按钮的点击数据
//function cacluteNumber() {
// //window.localStorage.removeItem("number");
// alert("计算开始");
// //获取要显示计数的文本框
// var showNum = document.getElementById("showNumber");
// //判断本地缓存中是否有要计算的数字,没有则创建,有则追加
// if(window.localStorage.getItem("number")==null){
// //创建number这个键值对并储存在本地
// window.localStorage.setItem("number", 1);
// }
// else if (window.localStorage.getItem("number") != null) {
// //如果本地已经存在这个键值对,则取出该键值对并将值转换成int类型,加一后再存入本地
// var num = window.localStorage.getItem("number");
// num++;
// window.localStorage.setItem("number",num);
// }
// showNum.value = window.localStorage.getItem("number");
// alert(showNum.value);
//}
//2.通过sessionStorage存储数据 注意:sessionStorage在每次重新打开网页时该数据置空
function cacluteNumber() {
//判断是否支持sessionStorage存储
var showNum = document.getElementById("showNumber");
if (window.sessionStorage != null) {
alert("该浏览器支持sessionStorage存储");
if (window.sessionStorage.getItem("number") == null) {
window.sessionStorage.setItem("number", 1);
}
else {
window.sessionStorage.setItem("number", parseInt(window.sessionStorage.getItem("number")) + 1);
}
showNum.value=window.sessionStorage.getItem("number");
}
else {
alert("该浏览器不支持sessionStorage存储");
}
}
</script>
</head>
<body οnlοad="isSupportLocalStorage()">
<!--<div id="n"></div>-->
点击按钮的次数为: <input type="text" id="showNumber"/><br />
<button οnclick="cacluteNumber()">计算</button>
</body>
</html>