localStorage

最新推荐文章于 2022-10-13 11:37:36 发布

九木旭

最新推荐文章于 2022-10-13 11:37:36 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/xdprintf/article/details/49558797

版权

CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。但是如果你找到浏览器的隐私或者本地存储的数据删除也是一样可以删除的！

本地存储数据库在同样域名下的网页间是共享的，即便是在多个浏览器标签页中。我在做产品购物车的时间使用到了，这边选择产品，把产品属性拼接成JSON字符串保存到localStorage中，然后到购物车中去取……

判断浏览器是否支持本地存储：

一：

1if(window.localStorage){

2 alert('This browser supports localStorage');

3}else{

4 alert('This browser does NOT support localStorage');

localStorage的用法极其简单！（Map格式（键-值））一共就这么多……

localStorage. length;    返回现在已经存储的变量数目
localStorage. key(n);    返回第n个变量的键值(key)
localStorage.getItem(key);      和localStorage.key一样，取得键值为key的变量的值
localStorage.setItem(key, val);     和localStorage.key = val一样，设置键值key的变量值
localStorage.removeItem(key);     删除键值为key的变量
localStorage.clear();   清空所有变量

用法很多，可以当成是一个对象方式使用……

localStorage.a = 1; //设置a为"1"
localStorage["a"] = "FakeMr"; //设置a为"FakeMr"，自动覆盖上面的值。

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。（个人比较喜欢：JSON.parse/JSON.stringify结合使用）

----------------------------------------------------------------------------------------------------------------------------------------------------

存储一个对象

function person(name, age){
this.name=name;
this.age=age;}在js代码中，我们新建一个person对象：
var p=new person('yubo', 21);
下面就是关键的步骤了，我们将对象转化为字符串：
var objStr=JSON.stringify(p);
注意了：JSON.stringify()函数就是把一个对象转化为字符串
然后，你就可以将objStr按正常的方式存入localStorage中了，如下所示：
var s=window.localStorage;
s.setItem("person", objStr);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!--强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览-->
<meta content="yes" name="apple-mobile-web-app-capable" />
<!--iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<!--iphone的私有标签，它指定的iphone中safari顶端的状态条的样式-->
<meta content="telephone=no" name="format-detection" />
<!--告诉设备忽略将页面中的数字识别为电话号-->

<title>旋转</title>
<style>
#wyj{
	margin:0 auto;
	text-align:center;
	color:rgba(255,255,255,1);
	height:200px;
	width:200px;
	border-radius:200px;
	background:rgba(0,51,153,1);
	-webkit-transform:rotate(0deg);
	
	}

</style>
<script src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
var option={
		i:0,
		str:true
		}	
if(window.localStorage){
	wi=window.localStorage.getItem("stri");
	}
$(function(){
	$("#wyj").css("-webkit-transform","rotate("+wi+"deg)");
	})
function rotate(id){

	option.i=option.i+10;
	$("#"+id).css("-webkit-transform","rotate("+option.i+"deg)");
		window.localStorage.setItem("stri",option.i);
			if(option.str==false){
				option.str=true;
				return;
				}
	setTimeout(
	function(){
		rotate(id);
		},1);
	}
function stopw(){
	option.str=false;
	}
var raclen=function(){
	window.localStorage.clear();
	
	}
</script>
</head>
<body>
<div id="wyj" οnclick="rotate(this.id);">lover</div>
<input type="button"  value="停止" οnclick="stopw();"/>
<input type="button"  value="清除缓存" οnclick="raclen()"/>
</body>
</html>

<html>
<head>
<title>登陆</title>
<style>
input{ width:200px; height:48px; border:rgba(0,153,102,1) solid 1px; margin:10px;}
</style>
<script src="js/jquery-1.7.2.min.js" ></script>
<script>

	var option = {
		name: "wyj",
		password: "123456",
		strus:"error"
	}
	$().ready(function(e) {
		if(window.localStorage.getItem("str")=="ok"){
				alert("欢迎老用户");
				window.location.href = "http://baidu.com";
			
			}
		$(".wyj").click(function(e) {
			var name = $("#name").val();
			var pwd = $("#pwd").val();
			if (name == option.name && pwd == option.password) {
				option.strus="ok";
				window.localStorage.setItem("str","ok");
				alert("登陆成功");
				window.location.href = "http://baidu.com";
			} else {
				alert("账户名或者密码不匹配");
			}
		});

	});
</script>
</head>

<body>
<div align="center">
<input type="button" value="表单"/><br/>
<input type="text" placeholder="用户名" id="name"/><br/>
<input type="text" placeholder="密码" id="pwd"/><br/>
<input type="button" class="wyj" value="登陆" />

</div>

</body>

</html>

九木旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
localStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。但是如果你找到浏览器的隐私或者本地存储的数据删除也是一样可以删除的！本地存储数据库在同样域名下的网页间是共享的，即便是在多个浏览器标签页中。我在做产品购物车的时间使用到了，这边选择产品，把产品属性拼接成JSON字符串保存到localStorage中，然后到购物车中去取……判断浏览器是否支持本地存储：一：1if
复制链接

扫一扫