• cookie以及Storage的共同点、区别与使用

    文章目录

    一、 Storage浏览器本地存储

    1-1 localStorage与 sessionStorage

    1. Storage不会自动把数据发送给服务器，仅在本地保存

    2. Storage也有存储大小的限制，但比cookie大得多，可以达到5M或更大

    3. 数据有效期不同

      • sessionStorage： 仅在当前浏览器窗口关闭之前有效
      • localStorage： 始终有效，窗口或者浏览器关闭也一直保存，用作持久数据

    4. 作用域不同

      • sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
      • localStorage：在所有的同源窗口中都是共享的

    5. webStorage支持事件通知机制，可以将数据更新的通知发送给监听者

    6. webStorage的api接口使用更方便

    1-2 使用

      • xxxStorage.setItem('key','value')
      • xxxStorage.getItem('key')
      • xxxStorage.removeItem('key')
      • xxxStorage.clear()

    2. 以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>localStorage</title>
</head>

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我删除所有数据</button>


    <script>
        let p = {
            name: '张三',
            age: 18
        }

        function saveData() {
            localStorage.setItem('msg','hello!!!')
            localStorage.setItem('person',JSON.stringify(p))
        }

        function readData() {
            console.log(localStorage.getItem('msg'));
            consoloe.log(JSON.parse(localStorage.getItem('person')))
        }

        function deleteData() {
            localStorage.removeItem('msg')
        }

        function deleteAllData() {
            localStorage.clear()
        }
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    1-3 手写一个会过期的localStorage

    1-3-1 惰性删除
    1. 惰性删除： 某个键值过期之后，该键值不会被删除。而是等到下次使用，被检查过期值，才能得到删除
    var lsc = (function(self){
	var prefix = 'one_more_lsc_'

	// 增加一个键值对数据
	self.set = function(key, val, expires) {
		key = prefix + key
		val = JSON.stringify({'val': val, 'expires': new Date().getTime() + expires * 1000})
		localStorage.setItem(key, val)
	}

	// 读取对应键的值
	self.get = function (key) {
		key = prefix + key;
		var val = localStorage.getItem(key)
		if (!val) {
			return null;
		}
		val = JSON.parse(val);
		if (val.expires < new Date().getTime()) {
			localStorage.removeItem(key);
			return null;
		}	
		return val.val
	}
	return self;
}(lsc || {}));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    1-3-2 定时删除
      • 每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用
      • 定时删除有效减少了对localSorage空间的浪费

    2. 每隔1s执行一次定时删除，操作如下：

      • 随机测试20个设置了过期时间的key
      • 删除所有发现的已过期的key
      • 若删除的key超过5个则重复步骤一，直至重复500次
    var lsc = (function (self) {
	var prefix = 'one_more_lsc'
	var list = [];
	// 初始化list
	self.init = function () {
		var keys = Object.keys(localStorage)
		var reg = new RegExp('^' + prefix);
		var temp = []
		// 遍历所有localStorage中的所有key
		for (var i = 0; i < keys.length; i++) {
			// 找出可过期缓存的key
			if (reg.test(keys[i])) {
				temp.push(keys[i])
			}
		}
		list = temp;
	}
	self.init();
	self.check = function () {
		if (!list || list.length == 0) {
			return 
		}
		var checkCount = 0
		while(checkCount < 500) {
			var expireCount = 0
			// 随机测试20个设置了过期时间的key
			for (var i = 0; i < 20; i++) {
				if(list.length == 0) {
					break;
				}
				var index = Math.floor(Math.random() * list.length);
				var key = list[index];
				var val = localStorage.getItem(list[index])
				// 从list中删除被惰性删除的key
				if(!val) {
					list.splice(index, 1);
					expireCount++;
					countinue;
				}
				val = JSON.parse(val)
				// 删除所有发现的已过期的key
				if (val.expires < new Date().getTime()) {
					list.splice(index, 1);
					localStorage.removeItem(key)
					expireCount++
				}
			}
			// 若删除的key不超过5个则跳出循环
			if (expiresCount <= 5 || list.length == 0) {
				break
			}
		}
		// 每隔1s执行一次定时删除
		window.setInterval(self.check,1000)
		return self;
	}
}(lsc || {}))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    1-4 Storage的限制

    1. 浏览器的大小不统一，并且在IE8以上版本才支持localStorage这个属性
    2. 所有浏览器都会把Storage的值类型限定为string类型，使用JSON.stringfy()将JSON对象转换为字符串
    3. Storage在浏览器的隐私模式下面是不可读的
    4. Storage本质上是对字符串的读取，存储内容多的话会消耗内存空间，导致页面变卡
    5. Storage不能被爬虫抓取到

    二、 Cookie

    2-1 cookie与Storage的区别

    1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和 服务器间来回传递

      • cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下

    2. 存储大小限制不同： cookie数据不能超过4K

      • 同时因为每次http请求都需要携带cookie，所以cookie知识和保存很小的数据，如会话标识

    3. 数据有效期不同：cookie只在设置的cookie过期时间之前有效，即使窗口关闭或者浏览器关闭

    4. 作用域不同： 在所有同源窗口中都是共享的

    2-2 cookie的概念

      • cookie是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时，就可以通过JS来创建和读取cookie
      • cookie是存于用户硬盘的一个文件。这个文件对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用
        • cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用
      • 不同浏览器对cookie的实现不同，保存在一个浏览器中的cookie到另一个浏览器是不能获取的

    2-3 cookie用途

    1. 只需要登陆一次，将登录信息存放在cookie中。下次登陆时就可以直接获取cookie中的用户名密码来进行登录
    2. 页面之间的传值，一个页面跳转至另一个页面： 将数据保存在cookie中，然后在另外页面再去获取cookie中的数据

    2-4 cookie使用

    2-4-1 介绍
    1. document.cookie = "name=value;expires=evalue;path=pvalue;domain=dvalue;secure;"
    2. 这是一个键值对，分别表示要存入的 属性 和 值。
      • 为了防止中文乱码，我们可以使用encodeURIComponent()编码；decodeURIComponent()解码
      	document.cookie="name=中文";
//为了防止中文乱码，我们可以使用encodeURIComponent()编码；decodeURIComponent()解码
document.cookie = encodeURIComponent("name")+"="+encodeURIComponent("中文")

      • 1
      • 2
      • 3
    2-4-2 使用cookie案例
    function setCookie(objName, objValue, objHours) {  // 添加cookie
	var str = objName + '=' + encodeURIComponent(objValue);
	if (objHours > 0) {  // 为0时不设定过期时间，浏览器关闭时cookie自动消失
		var date = new Date();
		var ms = objHours * 3600 * 1000;
		date.setTime(date.getTime() + ms);
		str += ";expires=" + date.toUTCString();
	}
	document.cookie = str
}
// 获取cookie
function getCookie(objName) { // 获取指定名称的cookie值
	// 多个cookie保存的时候是以; 分开的
	var arrStr = document.cookie.split("; ");
	for (var i = 0; i < arrStr.length; i++) {
		var temp = arrStr[i].split("=");
		if (temp[0] == objName) {
			return decodeURIComponent(temp[1]) 
		} else {
			return "";
		}
	}

	// 为了删除指定名称的cookie，可以将过期时间设定为一个过去的时间
	function delCookie(name) {
		var date = new Date();
		date.setTime(date.getTime() - 10000);
		document.cookie = name + "=a; expires=" + date.toUTCString();
	}
	
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    2-5 cookie使用的注意

    1. cookie可能被禁用，当用户非常注重个人隐私保护时，可能被禁用

    2. cookie是与浏览器相关的

      • 即使访问同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的

    3. cookie可能被删除，cookie就是硬盘上的一个文件，可能被用户删除

    4. cookie安全性不够高，所有的cookie都是以纯文本的形式记录在文件中，要保护用户名密码等信息时，最好实现经过加密处理

    5. cookie在保存时，只要后面保存的name相同，就覆盖前面的cookie

    三、Storage与Cookie的共同点

    1. 都是保存在浏览器端，且都是同源的
  • 相关阅读:
    MySQL【约束】
    基于SSM农产品商城系统
    设置背景图片大小的方法
    二百零七、Flume——Flume实时采集5分钟频率的Kafka数据直接写入ODS层表的HDFS文件路径下
    AtCoder—E - Σ[k=0..10^100]floor(X／10^k
    iOS xcframework项目提示“ld: framework not found”
    【JVM虚拟机】JVM常见面试题总结
    Tensorflow图像识别 Tensorflow手写体识别（一）
    DELL服务器，CPU一直会提示温度超过阈值。针对CPU temperature is greater than the upper crit
    lintcode 820 · 矩形【中等 vip 枚举法 数学】
  • 原文地址：https://blog.csdn.net/hannah2233/article/details/126778752