详解JavaScript中 Cookie、 LocalStorage 与 SessionStorage的api

最新推荐文章于 2023-07-06 08:30:42 发布

Army-海军

最新推荐文章于 2023-07-06 08:30:42 发布

阅读量1.5w

点赞数 16

分类专栏： JavaScript 文章标签： Cookie LocalStorage SessionStorage api

本文链接：https://blog.csdn.net/weixin_41229588/article/details/90757771

版权

JavaScript 专栏收录该内容

50 篇文章 17 订阅

订阅专栏

基本概念

Cookie

Cookie ，它的大小限制为4KB左右。它的主要用途有保存登录信息

localStorage

localStorage 本地存储只要你不删用户不删一直都在

sessionStorage

sessionStorage 与 localStorage 的接口类似，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。所以叫做会话级别的。

api

Cookie

/**
 *  第一个参数是键，简单说就是名字
 * 第二个是值，简单说就是内容
 * 第三个啥时候过期，这个是天数，过期浏览器就删
 */
function setCookie(c_name, value, expiredays) {
	var exdate = new Date()
	exdate.setDate(exdate.getDate() + expiredays)
	document.cookie = c_name + "=" + escape(value) +
		((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}
/**
 * @param {Object} c_name 跟上边那个函数对应了
 * 
 */
function getCookie(c_name) {
	if (document.cookie.length > 0) {
		c_start = document.cookie.indexOf(c_name + "=")
		if (c_start != -1) {
			c_start = c_start + c_name.length + 1
			c_end = document.cookie.indexOf(";", c_start)
			if (c_end == -1) c_end = document.cookie.length
			return unescape(document.cookie.substring(c_start, c_end))
		}
	}
	return ""
}

localStorage和sessionStorage的api一致

// 本地localhost存储
localStorage.setItem('localData1', JSON.stringify(data));
sessionStorage.setItem('sessionStorage', JSON.stringify(data));
//本地获取
var data1 = JSON.parse(localStorage.getItem('localData1')); 
var data2 = JSON.parse(sessionStorage.getItem('sessionStorage')); 
//本地删除
localStorage.removeItem('localData1');

完美！

tip:

getCookie可能还有更好的方法。