1、 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()
<!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.3 手写一个会过期的localStorage
惰性删除：

某个键值过期之后，该键值不会被删除。而是等到下次使用，被检查过期值，才能得到删除

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 || {}));
定时删除
  • 每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用
  • 定时删除有效减少了对localSorage空间的浪费

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

2 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 的概念

  1. cookie是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时，就可以通过JS来创建和读取cookie

  2. cookie是存于用户硬盘的一个文件。这个文件对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用

    • cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用

  3. 不同浏览器对cookie的实现不同，保存在一个浏览器中的cookie到另一个浏览器是不能获取的

2.3 cookie 的用途
  1. 只需要登陆一次，将登录信息存放在cookie中。下次登陆时就可以直接获取cookie中的用户名密码来进行登录
  2. 页面之间的传值，一个页面跳转至另一个页面： 将数据保存在cookie中，然后在另外页面再去获取cookie中的数据
2.4 cookie 的使用
document.cookie = "name=value;expires=evalue;path=pvalue;domain=dvalue;secure;"

这是一个键值对，分别表示要存入的属性和值。为了防止中文乱码，我们可以使用 encodeURIComponent() 编码；decodeURIComponent() 解码。

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();

	}

}
2.5 cookie 的使用注意
  1. cookie 可能被禁用，当用户非常注重个人隐私保护时，可能被禁用
  2. cookie 是与浏览器相关的（即使访问同一个页面，不同浏览器之间所保存的 cookie 也是不能互相访问的）
  3. cookie 可能被删除，cookie 就是硬盘上的一个文件，可能被用户删除
  4. cookie 安全性不够高，所有的 cookie 都是以纯文本的形式记录在文件中，要保护用户名密码等信息时，最好实现经过加密处理
  5. cookie 在保存时，只要后面保存的 name 相同，就覆盖前面的 cookie

3 Storage与Cookie的共同点

都是保存在浏览器端，且都是同源的

cookie以及Storage的共同点、区别与使用的更多相关文章

  1. 关于cookie与本地 存储的区别的问题。

    关于cookie与本地 存储的区别的问题. 1. cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存. 2. coo ...

  2. Cookie和Session简介与区别

    1.Cookie和Session简介与区别 在非常多时候,我们需要跟踪浏览者在整个网站的活动,对他们身份进行自动或半自动的识别(也就是平时常说的网站登陆之类的功能),这时候,我们常采用Cookie与 ...

  3. 牛客网Java刷题知识点之什么是cookie、什么是session、cookie和session有什么区别

    不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?tpId=31&tqId=21170&query=&asc= ...

  4. Cookie 和 Session 有什么区别呢？

    Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等 但如果再往深入探讨的话,就慢慢有一些朋友不太了解了 ...

  5. session与cookie 浏览器关闭时的区别

    session与cookie 浏览器关闭时的区别 cookie是存储在本地,当cookie在浏览器关闭的时候,再次打开是否记录之前的值,这跟cookie的过期时间设置有关. 如果cookie的过期时间 ...

  6. 关于Token和Cookie做权限校验的区别及Token自动续期方案

    title: 关于Token和Cookie做权限校验的区别及Token自动续期方案 categories: 后端 tags: - .NET Token和Cookie的区别 首先,要知道一些基本概念:h ...

  7. 了解cookie和storage的区别及优缺点

    共同点:用于数据的存储. 区别: 1.是否需要添加到http请求头? HTTP Cookie(cookie):在客户端存储会话信息,要求服务器对任意HTTP请求发送set-cookie HTTP头作为 ...

  8. cookie，sessionstorage，localstorage区别

    都是保存在浏览器端,且同源的,区别如下: 1.携带 cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递. 而sessionStorage和local ...

  9. Java cookie和session介绍与区别

    一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于才服务器端保持状态的 ...

  10. （进阶篇）浅谈COOKIE和SESSION关系和区别

    COOKIE介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 coo ...

随机推荐

  1. Spring Boot 启动优化实践

    作者:vivo 互联网服务器团队- Liu Di 本文系统性分析并优化了一个Spring Boot项目启动耗时高达 280 秒的问题.通过识别瓶颈.优化分库分表加载逻辑.异步初始化耗时任务等手段,最终 ...

  2. 数栈xAI：轻量化、专业化、模块化，四大功能革新 SQL 开发体验

    在这个数据如潮的时代,SQL 已远远超越了简单的查询语言范畴,它已成为数据分析和决策制定的基石,成为撬动企业智慧决策的关键杠杆.SQL 的编写和执行效率直接关系到数据处理的速度和分析结果的深度,对企业 ...

  3. ChatGPT学习之旅 (6) 聊聊AI人设

    大家好,我是Edison. 上一篇:Prompt终极用法 通过前面5篇内容我们了解了从基础到高级的Prompt用法,今天我们来聊聊AI的人设! 打造人设的步骤:只要3步 在Prompt实践中,我们了解 ...

  4. 21verilog函数

    Verilog函数详解 目录 1. 函数简介 2. 函数基本语法 3. 函数特性与限制 4. 函数参数与返回值 5. 常数函数 6. automatic函数 7. 函数应用场景 8. 最佳实践与注意事 ...

  5. MKL库解线性最小二乘问题(LAPACKE_dgels)

    LAPACK(Linear Algebra PACKage)库,是用Fortran语言编写的线性代数计算库,包含线性方程组求解(AX=B).矩阵分解.矩阵求逆.求矩阵特征值.奇异值等.该库用BLAS库 ...

  6. 将有父子关系的多个map写到一起。将子孙放到父级节点中，每个节点都会关联起来（使用list和map）

    此方法效率较低,推荐查看博客 研究将有pid和id的List<Map<String,Map>>组成树 import java.util.ArrayList; import ja ...

  7. 前端开发系列084-Node篇之fs

    本文对Node的内置模块fs进行介绍,包括模块的基本情况和简单使用. 一.模块介绍 fs文件模块(File System)是Node的内置核心模块之一,代码中可以通过var fs = require( ...

  8. SpringBoot--Profile你用对了吗

    所谓Profile,就是一组配置环境,各种程序组件的合集. 实际开发中,经常要在不同的环境间切换,比如,开发时应用的是开发场的部署环境:测试时,用的是测试场的部署环境:上线时,用的是产品场的部署环境. ...

  9. 利用gitblit创建本地Git仓库

    最近有个子项目,还未正式在服务器上进行开发环境设置,提出先本地设置Git仓库,于是开始搞这个: 首先是去gitblit官网进行软件工具下载 软件下载好解压后,运行gitblit.cmd 出现8843端 ...

  10. Spring Aop 获取入参和出参

    1. 概述 本次,我利用 Spring Aop 的注解方式获取切入点的入参和出参,因为比较简单,所以就直接上代码了. 2. 代码编写 注解类 /** * 日志注解 * * @author Jianta ...