HTML5中的数据存储localStorage和sessionStorage

最新推荐文章于 2023-09-06 16:52:47 发布

中情

最新推荐文章于 2023-09-06 16:52:47 发布

阅读量840

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhongqing_fzq/article/details/51898117

版权

Web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!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()">

点击按钮的次数为: <input type="text" id="showNumber"/><br />
<button οnclick="cacluteNumber()">计算</button>
</body>
</html>

中情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的数据存储localStorage和sessionStorage

HTML5中的web存储 div { width:200px; height:100px; position:relative; top:10px; left:10px; background:red; } //1.判断该浏览器是否支持loc
复制链接

扫一扫

专栏目录