cookie、本地存储（localStorage、sessionStorage）用法、设置、查看位置及区别

最新推荐文章于 2023-04-12 18:14:25 发布

DOM曼珠沙华

最新推荐文章于 2023-04-12 18:14:25 发布

阅读量3.8k

点赞数 1

分类专栏：浏览器文章标签：浏览器

本文链接：https://blog.csdn.net/a18792627168/article/details/106304338

版权

浏览器专栏收录该内容

7 篇文章 1 订阅

订阅专栏

HTML5之前的存储：cookie

设置cookie：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  	<meta charset="UTF-8">
  	<title>cookie的应用——记住用户名</title>
</head>
<body>
	<form action="#" id="myform">
		<label for="username">用户名：</label><input type="text" name="username" id="username" />
		<label for="userpass">密码：</label><input type="password" name="userpass" id="userpass" />
		<input type="submit" value="登录" />
		<a href="javascript:;">清除记录</a><br>	
		<span id="span1"></span>
	</form>
  	<script>
  		window.onload = function(){
  			function setCookie(name,value,hours){
			 var d = new Date();
			 d.setTime(d.getTime() + hours * 3600 * 1000);
			 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
			 console.log("cookie",document.cookie);
			}
			function getCookie(name){
			 var arr = document.cookie.split('; ');
			 for(var i = 0; i < arr.length; i++){
			  var temp = arr[i].split('=');
			  if(temp[0] == name){
			   return temp[1];
			  }
			 }
			 return '';
			}
			function removeCookie(name){
			 var d = new Date();
			 d.setTime(d.getTime() - 10000);
			 document.cookie = name + '=1; expires=' + d.toGMTString();
			}
				var mm = new Date();
				var oSpan = document.getElementById("span1");
				oSpan.innerHTML = mm;
			  var oForm = document.getElementById('myform');
			  var oTxt1 = document.getElementById('username');
			  var oTxt2 = document.getElementById('userpass');
			  var oClear = document.getElementsByTagName('a')[0];
			  oTxt1.value = getCookie('username');
			  oTxt2.value = getCookie('userpass');
			  oForm.onsubmit = function(){
			    setCookie('username',oTxt1.value,30);
			    setCookie('userpass',oTxt2.value,30);
			  }
			  oClear.onclick = function(){
			    removeCookie('username');
			    removeCookie('userpass');
			    oTxt1.value = '';
			    oTxt2.value = '';
			  }
			}
  	</script>
</body>
</html>

上述代码包含设置、读取、清除cookie。

运行后：

在谷歌上检查设置的cookie，发现设置是正常的。检查方法可以看这篇文档。

同时，这里也设置了时长：

cookie存储永久数据存在这几个问题：

大小：cookie的大小被限制在4KB。

带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

复杂性：要正确的操作cookie是很困难的。

Web Storage

实现数据存储的实例：

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>webStorage示例</title>
	</head>
	<body>
		<h1>webStorage示例</h1>
		<p id="msg"></p>
		<input type="text" id="input" />
		<input type="button" value="保存数据" onClick="saveStorage('input');"/>
		<input type="button" value="读取数据" onClick="loadStorage('msg');"/>
	</body>
</html>

HTML5之后的存储：sessionStorage

将数据保存到session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。

sessionStorage.setItem('key','value');
//或
sessionStorage.key = 'value';
 
//读取数据的方法
变量 = sessionStorage.getItem('key');
//或
变量 = sessionStorage.key;

在使用sessionStoage存储数据时，

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
	//或sessionStorage.message = str;
	console.log(sessionStorage);
}
function loadStorage(id){
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	// 或 var msg = sessionStorage.message;
	target.innerHTML = msg;
}

存储的结果：

HTML5之后的存储：localStorage

设置

将数据保存到客户端本地的硬件设备（硬盘或其他）中，即使浏览器被关闭，该数据仍然存在，下次打开浏览器访问网站仍然可以继续访问。

localStorage.setItem('key','value');
//或
localStorage.key = 'value';
 
//读取数据的方法
变量 = localStorage.getItem('key');
//或
变量 = localStorage.key;

在使用localStorage存储数据时：

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
	//localStorage.message = str;
	console.log(localStorage);
}
function loadStorage(id){
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	// 或 var msg = localStorage.message;
	target.innerHTML = msg;
}

与sessionStorage存储位置一致。

在浏览器查看，打开调试工具(F12)，在application选项卡下可以查看。

localStorage作为客户端浏览器持久化存储方案

存储位置

这个是浏览器隔离的，每个浏览器都会把localStorage存储在自己的UserData中，如chrome一般就是

C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

下的文件003140.log 看到存储的数据 testtest：

区别

localStorage和sessionStorage的相同点：

共同方法key、setItem、getItem、removeItem、clear()等方法。
都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象
存储大小都为5M
都遵守同源策略

下图是在浏览器内sessionStorage对象内的方法：

不同点：

sessionStorage为临时保存，浏览器关闭则失效，localStorage为永久保存。
localStorage 在同源的不同窗口下可共享，在不同浏览器中不可共享
sessionStorage 在同源的不同窗口下不可共享。注意这里的不同窗口是指浏览器另起一窗口，并不是指页面路由跳转

DOM曼珠沙华

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
cookie、本地存储（localStorage、sessionStorage）用法、设置、查看位置及区别

HTML5之前的存储：cookie设置cookie：<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>cookie的应用——记住用户名</title></head><body> <form action="#" id="myform"> <label for="user
复制链接

扫一扫