博客园（纯干货）：https://www.cnblogs.com/zheng-yuzhu/

参考黑马程序员Vue系列课程

1、基础知识

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

2、代码实例（localStorage.html）

localStorage.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8" />

		<title>localStorage</title>

	</head>

	<body>

		<h2>localStorage</h2>

		<button onclick="saveData()">点我保存一个数据</button><br><br>

		<button onclick="readData()">点我读取一个数据</button><br><br>

		<button onclick="deleteData()">点我删除一个数据</button><br><br>

		<button onclick="deleteAllData()">点我清空数据</button><br><br>

		<script type="text/javascript" >

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

			function saveData(){

				localStorage.setItem('msg','hello!!!')

				localStorage.setItem('msg2',666)

				localStorage.setItem('person',JSON.stringify(p))

			}

			function readData(){

				console.log(localStorage.getItem('msg'))

				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')

				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))

			}

			function deleteData(){

				localStorage.removeItem('msg2')

			}

			function deleteAllData(){

				localStorage.clear()

			}

		</script>

	</body>

</html>

3、测试效果




4、代码实例（sessionStorage.html）

sessionStorage.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8" />

		<title>sessionStorage</title>

	</head>

	<body>

		<h2>sessionStorage</h2>

		<button onclick="saveData()">点我保存一个数据</button>

		<button onclick="readData()">点我读取一个数据</button>

		<button onclick="deleteData()">点我删除一个数据</button>

		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >

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

			function saveData(){

				sessionStorage.setItem('msg','hello!!!')

				sessionStorage.setItem('msg2',666)

				sessionStorage.setItem('person',JSON.stringify(p))

			}

			function readData(){

				console.log(sessionStorage.getItem('msg'))

				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')

				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))

			}

			function deleteData(){

				sessionStorage.removeItem('msg2')

			}

			function deleteAllData(){

				sessionStorage.clear()

			}

		</script>

	</body>

</html>

5、测试效果同3

Vue学习之---浏览器本地存储（8/17）的更多相关文章

  1. 浏览器本地存储（browser-storage，HTML5-localStorage > IE-UserData > Cookie）

    https://www.baidufe.com/component/browser-storage/index.html BrowserStorage是浏览器本地存储的一个解决方案,存储优先级依次为: ...

  2. jquery访问浏览器本地存储cookie，localStorage和sessionStorage

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...

  3. 用于浏览器本地存储的js插件 - jStorage

    简介 jStorage是一个跨浏览器的将key-value类型的数据存储到浏览器本地存储的js插件——jStorage支持所有主流浏览器,PC机(甚至包括是IE6)和移动终端均可用.此外,jStora ...

  4. 浏览器本地存储（browser-storage）

    https://www.baidufe.com/component/browser-storage/api.html 首页 | API参考 | 升级日志 BrowserStorage.api.set( ...

  5. JavaScript浏览器本地数据存储

    浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...

  6. JavaScript：浏览器的本地存储

    cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...

  7. h5 本地存储和读取信息

    总结:cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)对于购物网站而言,cookie是非常重要的,为了实现购物车功能,把已选物品加入 ...

  8. (转)HTML5 本地存储

    原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...

  9. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

随机推荐

  1. 【原创】Magisk Root隐藏模块 Shamiko安装

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Root隐藏模块 Shamiko安装 操 ...

  2. [MRCTF2020]套娃-1

    1.打开之后未发现有用的信息,右键检查源代码信息,发现部分代码信息,结果如下: 2.对代码进行分析:$_SERVER['QUERY_STRING']:指的是查询的字符串,即地址栏?之后的部分,%5f指 ...

  3. http、https和Cookie

    http和https http,https 都是网络传输协议 是用于网络相关传输,http走的是明文传输,https走的密文传输(内部采用对称加密以及非对称加密).对应的https安全性要高于http ...

  4. Dolphin Scheduler 1.2.0 部署参数分析

    本文章经授权转载 1 组件介绍 Apache Dolphin Scheduler是一个分布式易扩展的可视化DAG工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程 ...

  5. Apache DolphinScheduler 迎来 2 位 PPMC

    经过 Apache DolphinScheduler PPMC 们的推荐和投票,我们高兴的宣布:Apache DolphinScheduler 迎来了 2 位 PPMC .他们是(github id) ...

  6. Linux—权限管理

    Linux 权限管理 1.权限简介 Linux权限是操作系统用来限制对资源访问的机制,权限一般分为读.写.执行.系统中每个文件都拥有特定的权限:属主.属组以及其他人,通过这样的机制来限制哪些用户或用户 ...

  7. CSP2021-S游记

    前言 年纪大了,脑子乱了,渐渐被低年级吊打了. 大家这么内卷下去,高年级的普遍后悔自己生早了,低年级永远占优势,不只是机会优势,还有能力优势. 快进到改变基因出生国家队算了-- Day0 非常不幸地被 ...

  8. UOJ#XX A+B Problem （罔烙硫）

    题面 背景 题目描述 从前有个 n n n 个方格排成一行,从左至右依此编号为 1 , 2 , ⋯ , n 1,2,⋯,n 1,2,⋯,n. 有一天思考熊想给这 n n n 个方格染上黑白两色. 第 ...

  9. 「2020-2021 集训队作业」Yet Another Linear Algebra Problem（行列式，Binet-Cauchy 公式）

    题面 出题人:T L Y \tt TLY TLY 太阳神:Tiw_Air_OAO 「 2020 - 2021 集 训 队 作 业 」 Y e t A n o t h e r L i n e a r A ...

  10. Codeforces Round #585 (Div. 2) E. Marbles （状压DP），BZOJ大理石（同一道题）题解

    题意 林老师是一位大理石收藏家,他在家里收藏了n块各种颜色的大理石,第i块大理石的颜色为ai.但是林老师觉得这些石头在家里随意摆放太过凌乱,他希望把所有颜色相同的石头放在一起.换句话说,林老师需要对现 ...