三大缓存技术--localStorage、sessionStorage、Cookie

最新推荐文章于 2025-04-29 02:45:00 发布

哈哈ha~

最新推荐文章于 2025-04-29 02:45:00 发布

阅读量1.2k

点赞数 1

分类专栏：前端开发课程文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_56668869/article/details/125968918

版权

前端开发课程专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了客户端存储，包括Cookie的工作原理、如何创建和获取Cookie，以及localStorage和sessionStorage的API及其区别。重点讲解了同源策略、数据有效期和不同存储方式的适用场景。

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

一、客户端存储

web应用允许使用浏览器提供的API将数据存储在客户端电脑上
客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据
在同一个站点的不同页面之间，存储的数据是共享的
数据的存储有效期可以是临时的，比如关闭浏览器数据就销毁；也可以是永久的，可以在客户端电脑上存储任意时间

二、Cookie

1）创建cookie：

 function setCookie(name, value, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = name + "=" + value + "; " + expires
        }
 setCookie("haha",123,30)

2）获取cookie：

 function getCookie(name) {
            var name = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
            }
            return "";
        }
   //打印所有cookie
   console.log(document.cookie)

3）判断是否有某个cookie：

 function checkCookie() {
            var user = getCookie("username");
            if (user != "") {
                alert("欢迎 " + user + " 再次访问");
            }
            else {
                user = prompt("请输入你的名字:", "");
                if (user != "" && user != null) {
                    setCookie("username", user, 30);
                }
            }
        }

4）实例：

<input type="text" id="name">
<input type="text" id="pwd">
<button onclick="fn()">保存</button>	
<script>
	function fn(){
		var name = document.querySelector("#name");
		var pwd = document.querySelector("#pwd");
		var exday = new Date(new Date().getTime()+1000*60*60*24*30) 
		// 分号前面是用户缓存的内容，后面是对这些内容的一些设置（有效期等）
		document.cookie = `name=${name.value}&pwd=${pwd.value};expires=${exday}`;
	}
	window.onload=function(){
		// 获取cookie的值
		console.log(document.cookie);
	}	
</script>

5）拓展：

cookie属性：name、value、expires、domain、path、secure、max-age、HttpOnly。

name：

name 属性是必需的，它是一个键值对，用于指定Cookie的键

value：

value 属性是必需的，它是一个键值对，用于指定Cookie的值

expires：

expires 属性用于指定Cookie过期时间
它采用UTC或GMT格式通过new Date().toUTCString()或new Date().toGMTString()获取
若不设置该属性或设为null，Cookie只在当前会话有效，一旦关闭浏览器窗口，当前Session结束，该Cookie就会被删除
浏览器根据本地时间，决定Cookie是否过期，由于本地时间是不精确的，所以没有办法保证Cookie一定会在服务器指定的时间过期
当设置的失效时间大于等于1天时：可以在 expires 属性后面直接输入XX天数
Cookies.set('name', 'value', {
   expires: 7,
})
当设置的失效时间少于一天时：需要在当前的时间上加上失效时间。
//下面是设置cookie的失效时间为15分钟。
var m= new Date().getTime()
var expiresTime = new Date(m + 60 * 1000 * 15)
Cookies.set('name', 'value', {
  expires: expiresTime,
 })
当expires设置一个过去的时间点，那么这个cookie 会被立即删掉（失效）

domain：

domain属性指定Cookie所在的域名如baidu.com 若未指定则默认为设定该Cookie的域名
所指定的域名必须是当前发送Cookie的域名的一部分，如当前访问的域名是example.com，就不能将其设为google.com
只有访问的域名匹配domain属性，Cookie才会发送到服务器

path：

path属性用来指定路径且必须是绝对路径若未指定则默认为请求该Cookie的网页路径
只有path属性匹配向服务器发送的路径，Cookie才会发送
这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹配发送路径的一部分，就可以发送
如path属性等于/blog，则发送路径是/blog或者/blogroll，Cookie都会发送
path属性生效的前提是domain属性匹配

secure：

secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器
该属性只是一个开关，不需要指定值如果通信是HTTPS协议该开关会自动打开

max-age：

max-age属性用来指定Cookie有效期
正常情况下，max-age的优先级高于expires，但是二者有一些细微差别

HttpOnly：

HttpOnly属性用于设置该Cookie不能被JavaScript读取（即document.cookie不会返回该Cookie的值）
只用于向服务器发送主要是为了防止XSS攻击盗取Cookie

三、localStorage和sessionStorage的API

setItem()：将对应的名字和值传递进去，可以实现数据存储
getItem()：将名字传递进去，可以获取对应的值
removeItem()：将名字传递进去，可以删除对应的值
clear()：删除所有的缓存值，不需要参数
length：属性，获取键值对总数
key()：传入位置数，获取存储的值的名字

注：localStorage和sessionStorage是window的两个属性他们代表同一个Storage对象

四、localStorage

永久性保存
setItem(string key, value)：保存
getItem(string key)：获取
clear()：清空
removeItem(sring key)：根据键得到值

实例：

<input type="text" id="box1">
<button onclick="localStorage1()">LocalStorage存数据</button>
<button onclick="getlocalStorage1()">LocalStorage取数据</button>
<button onclick="clear1()">LocalStorage清除数据</button>
<script>
    function localStorage1(){
		window.localStorage.setItem("username","haha")
		window.localStorage.setItem("touxiang","一张图片的链接")
	}
	function getlocalStorage1(){
		var re=window.localStorage.getItem("username")
		console.log(re)			
	}
	function clear1(){
		window.localStorage.clear()
	}
</script>

五、sessionStorage

关闭浏览器数据就自动全部删除
sessionStorage.length：返回一个整数表示存储在sessionStorage对象中的数据项(键值对)数量
sessionStorage.key(int index)：返回当前sessionStorage对象的第index序号的key名称若没有就返null
sessionStorage.getItem(string key) ：返回键名(key)对应的值(value) 若没有就返回null
sessionStorage.setItem(string key, string value) ：接收一个键名(key)和值(value)作为参数，将键值对添加到存储中；若键名存在，则更新其对应的值
sessionStorage.removeItem(string key) ：将指定的键名(key)从sessionStorage对象中移除
sessionStorage.clear() ：清除 sessionStorage 对象所有的项

实例(与localStorage相似)：

<input type="text" id="box1">
<button onclick="sessionStorage()">sessionStorage存数据</button>
<button onclick="sessionStorage1()">sessionStorage取数据</button>
<button onclick="clear1()">sessionStorage清除数据</button>
<script>
	function sessionStorage1() {
		window.sessionStorage.setItem("username", "haha")
		window.sessionStorage.setItem("touxiang", "一张图片的链接")
	}
    function getsessionStorage1() {
		var re = window.sessionStorage.getItem("username")
		console.log(re)
	}

	function clear1() {
		window.sessionStorage.clear()
	}
</script>