cookie、localStorage和sessionStorage的区别及应用_createlocalstorage createsessionstorage-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47424753/article/details/126335194

本文介绍了HTTP协议的无状态特性，并探讨了通过Cookie、localStorage及sessionStorage等机制来实现状态保持的方法。详细对比了这些机制的大小限制、有效期限、存储位置及使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTTP

HTTP是无状态的，也就是你浏览了一个网页关闭后下一次再打开，服务器不会发现是同一个人浏览的。

Cookie

为了弥补HTTP的无状态
在这里插入图片描述
不能超过4kb
代码（第一次登录点击记住我后，下次再登录无需输入用户名）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form>
    <label>用户名</label>
    <input type="username" id="username">
    <label>密码</label>
    <input type="password">
    <input type="checkbox" id="rememberMe">
    <label for="rememberMe">记住我</label>
    <input type="submit" value="登录" id="submit">
  </form>
  <script>
    const username = document.getElementById("username");
    const checkbox = document.getElementById("rememberMe");
    const submit = document.getElementById("submit");
    let array = document.cookie.split(';').map(cookie => cookie.split('='));
    let cookie = {};
    for (let i = 0; i < array.length; i++) {
      let name = array[i][0];
      let value = array[i][1];
      cookie[name] = decodeURIComponent(value);
    }

    if (document.cookie) {//如果cookie有值就获取并设置
      username.value = cookie.username;
      checkbox.checked = true;
    }

    document.getElementById("submit").addEventListener('click', e => {
      console.log(checkbox.checked, username.value)
      if (checkbox.checked == true && username.value) {
        let key = 'username';
        let value = encodeURIComponent(username.value);
        let twoDays = 2 * 24 * 60 * 60;//设置超时时间
        document.cookie = `${key}=${value}; max-age=${twoDays};`;//储存cookie
      }
      e.preventDefault();
    });
  </script>
</body>

</html>

localStorage

永久保存再浏览器中，但是也可以自行删除；本身不参与服务器通信，所以容量比cookie大得多；因为localStorage是同步机制，所以会影响浏览器渲染进度；
代码（类似于历史搜索）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

	<body>
		<input type="text">
		<section> 
			<ul class="history"></ul> 
		</section>
		<button>添加</button>
		<script>
			const input = document.querySelector('input[type="text"]');
			const button = document. querySelector('button');
			const history = document.querySelector('.history');
			if( localStorage.length >0){
				for( let i=0; i< localStorage.length; i++){
					let key = localStorage.key (i);
					let li =document.createElement( 'li');
					let liText =document.createTextNode(localStorage.getItem(key));
					li.appendChild(liText);
					history.appendChild(li);
					let close = document.createElement( 'span');
					li.append(close);
					close.addEventListener( 'click',()=>{
						localStorage.removeItem(key);
						li.parentNode. removechild(li);
					});
				}
			}

			button.addEventListener( 'click',()=>{
				if( input.value ){
					let key =new Date().valueOf();let value =input.value;
					localStorage.setItem(key,value);input.value ='';
					let li =document.createElement('li');
					let liText = document.createTextNode(localStorage.getItem(key));li.appendChild(liText);
					history.appendChild(li);
					let close =document. createElement('span');
					li.append(close);
					close.addEventListener('click',()=>{
						localStorage.removeItem(key);
						li.parentNode.removechild(li);
					});
				}
			});
		</script>
	</body>

</html>

sessionStorage

代码（类似于历史搜索）但关闭窗口就会删除

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

	<body>
		<input type="text">
		<section> 
			<ul class="history"></ul> 
		</section>
		<button>添加</button>
		<script>
			const input = document.querySelector('input[type="text"]');
			const button = document. querySelector('button');
			const history = document.querySelector('.history');
			if( sessionStorage.length >0){
				for( let i=0; i< sessionStorage.length; i++){
					let key = sessionStorage.key (i);
					let li =document.createElement( 'li');
					let liText =document.createTextNode(sessionStorage.getItem(key));
					li.appendChild(liText);
					history.appendChild(li);
					let close = document.createElement( 'span');
					li.append(close);
					close.addEventListener( 'click',()=>{
						sessionStorage.removeItem(key);
						li.parentNode. removechild(li);
					});
				}
			}

			button.addEventListener( 'click',()=>{
				if( input.value ){
					let key =new Date().valueOf();let value =input.value;
					sessionStorage.setItem(key,value);input.value ='';
					let li =document.createElement('li');
					let liText = document.createTextNode(sessionStorage.getItem(key));li.appendChild(liText);
					history.appendChild(li);
					let close =document. createElement('span');
					li.append(close);
					close.addEventListener('click',()=>{
						sessionStorage.removeItem(key);
						li.parentNode.removechild(li);
					});
				}
			});
		</script>
	</body>

</html>

区别

	cookie	localStorage	sessionStorage
大小	4kb	10Mb	5Mb
兼容	H4/H5	H5	H5
访问	任何窗口	任何窗口	同一窗口
有效期	手动设置	无	到关闭窗口
存储位置	浏览器和服务器	浏览器	浏览器
与请求一起发送	是	否	否
语法	复杂	简单	简单