博客园（纯干货）：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. 我和Apache DolphinScheduler的这一年

    Apache DolphinScheduler,为Apache开源项目, 简称"DS", 中文名 "小海豚调度"(海豚聪明.人性化,又左右脑可互相换班,终生不用 ...

  2. 从零开始Blazor Server(11)--编辑用户

    用户编辑和角色编辑几乎一模一样,这里先直接贴代码. @page "/user" @using BlazorLearn.Entity @using Furion.DataEncryp ...

  3. LuoguP5024 保卫王国(动态DP，LCT)

    最小权覆盖集 = 全集 - 最大权独立集 强制取点.不取点可以使用把权值改成正无穷或负无穷实现 接下来就是经典的"动态最大权独立集"了 O(nlogn). 这不是我说的,是immo ...

  4. 前端监控系列2 ｜聊聊 JS 错误监控那些事儿

    作者:彭莉,火山引擎 APM 研发工程师.2020年加入字节,负责前端监控 SDK 的开发维护.平台数据消费的探索和落地. 有必要针对 JS 错误做监控吗? 我们可以先假设不对 JS 错误做监控,试想 ...

  5. java-循环

    1.循环:反复执行一段相同或相似的代码(逻辑相似或者相同)2.循环三要素: 1.循环变量的初始化 2.循环的条件(以循环变量为基础) 3.循环变量的改变(向着循环的结束变)循环变量:在整个循环过程中所 ...

  6. 部署 Vite 静态网站到 Gitee Pages

    开启仓库的 Gitee Pages 服务,部署目录 dist/: Vite 构建 build,输出到 dist 文件:取消 .gitignore 中的 dist: Vite preview 查看静态网 ...

  7. NOI2022游记，Au

    前言 8.19: 说实话,我在这里说几句话还不如水群, 新番把我心态搞炸了,我现在急需快乐 所以像游记这种吹水+回忆的文章让我现在非常痛苦. Day -1 (8.19) 上午是信心赛,太好辣,坐等D3 ...

  8. 拥挤的奶牛题解---队列优化DP---DD(XYX)​​​​​​​的博客

    拥挤的奶牛 时间限制: 1 Sec  内存限制: 128 MB 题目描述 FJ的n头奶牛(1<=n<=50000)在被放养在一维的牧场.第i头奶牛站在位置x(i),并且x(i)处有一个高度 ...

  9. STC15 串口通信

    串口1选择定时器2产生波特率 串口1相关寄存器 1.选择串口1所放的管脚 2.串口1配置步骤 3.选择串口工作模式 4.确定定时器2工作速度 代码配置 void Uart1_Tim2_Config(i ...

  10. 用Python实现广度优先搜索

    图是一种善于处理关系型数据的数据结构,使用它可以很轻松地表示数据之间是如何关联的 图的实现形式有很多,最简单的方法之一就是用散列表 背景 图有两种经典的遍历方式:广度优先搜索和深度优先搜索.两者是相似 ...