Html 5 网络存储之 LocalStorage、SessionStorage
目录
网络存储 简述
localStorage 本地存储
增删改查操作
JSON 转换
浏览器清理缓存
SessionStorage 会话存储
网络存储 简述
1、HTML 中，为了在本机存储用户数据，通常使用 JavaScript cookie。HTML 5 开始引入了 Web 存储，网站利用它在本机上存储用户数据。
2、cookie中每条cookie的存储空间为4k，localStorage 中一般浏览器支持的是5M大小
3、与 Cookie 相比，Web 存储的优点是：◈ 更安全 ◈ 更快 ◈ 能存储更多的数据
4、有两种类型的 Web 存储对象：
☉ localStorage(本地存储) ----- 存储没有到期日期的数据，即永久存储。
☉ sessionStorage(会话存储) ----- 仅存储一个会话的数据，临时存储。
5、不同浏览器无法共享 localStorage 或 sessionStorage 中的数据。相同浏览器中同一个目标服务器下的所有应用的页面间可以共享 localStorage数据，不同页面或标签页间无法共享sessionStorage的信息。
localStorage 本地存储
1、localStorage 拓展了 cookie 的 4K大小 限制
2、localStorage 可以将第一次请求的数据直接存储到本地，相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，现在主流浏览器高版本基本都是支持的
3、采用key-value方式进行存储，类似Java的map，当key重复时会直接覆盖
4、目前所有的浏览器中都会把 localStorage 的值类型限定为string类型，通常需要使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换，以及JSON转换
5、localStorage 在浏览器的隐私模式下不可读取
6、浏览器如果清理了缓存，那么localstorage保存的数据库也就不复存在了
增删改查操作
存储数据
1、注意事项：无论存储的值之前是什么类型，如数字、json、数组等等，存储之后，都会是字符串类型
2、当存储的 key 已经存在时，则直接覆盖 value，类似 Java 中的 map
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");/*** 获取localStorage对象* @type {Storage}*/let localStorage = window.localStorage;/**存值方式1 ———推荐方式*/localStorage["name"] = "张无忌";/**存值方式2 ———不推荐*/localStorage.age = 120;/**存值方式3 ———推荐方式*/localStorage.setItem("address","广东深圳");} else {console.log("当前浏览器不支持localStorage...");}
</script>
读取数据
1、对应着存值的三种方式，取值也有三种，分别如下所示，取出来的都是字符串类型，数字、数组、json 必须要转
2、因为上面已经存储过值了，所以下面可以直接取值即可
3、取值不存在时，返回 undefined 或者 null
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");/*** 获取localStorage对象* @type {Storage}*/let localStorage = window.localStorage;/**取值方式1---推荐方式*/let name = localStorage["name"];/**取值方式2---不推荐*/let age = parseInt(localStorage.age);/**取值方式3---推荐方式*/let address = localStorage.getItem("address");console.log("name："+name);console.log("age："+age);console.log("address："+address);} else {console.log("当前浏览器不支持localStorage...");}
</script>
移除数据
1、移除某个 key-value，使用 removeItem(var key) 方法
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");/*** 获取localStorage对象* @type {Storage}*/let localStorage = window.localStorage;/**存数据name*/localStorage.setItem("name","张无忌");/**取数据name*/let name = localStorage["name"];console.log("移除前 name："+name);/**删除数据name*/localStorage.removeItem("name");/**取数据name*/name = localStorage["name"];console.log("移除后 name："+name);} else {console.log("当前浏览器不支持localStorage...");}
</script>
2、移除所有key-value，使用 clear() 方法
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");/*** 获取localStorage对象* @type {Storage}*/let localStorage = window.localStorage;/**存数据name，age*/localStorage.setItem("name", "张无忌-赵敏");localStorage.setItem("age", 110);/**取数据*/console.log("移除所有数据前 ：" + localStorage.length);/**删除所有数据*/localStorage.clear();/**取数据*/console.log("移除所有数据后 ：" + localStorage.length);} else {console.log("当前浏览器不支持localStorage...");}
</script>
遍历数据
1、可以使用 key(var index) 方法获取 localStorage 中的 key，再可以根据 getItem(var key) 获取key对应的值
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");/*** 获取localStorage对象* @type {Storage}*/let localStorage = window.localStorage;/**存数据*/localStorage.setItem("name", "张无忌");localStorage.setItem("age", 110);localStorage.setItem("address", "广东深圳");let keyName = "";let keyValue = "";/**length属性可以获取大小* */for (let i = 0; i < localStorage.length; i++) {/**获取key以及value*/keyName = localStorage.key(i);keyValue = localStorage.getItem(keyName);console.log(i + "、" + keyName + " = " + keyValue);}} else {console.log("当前浏览器不支持localStorage...");}
</script>
JSON 转换
1、虽然不属于 localStorage 的内容范畴，但还是写上
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");/**随机生成新闻、视频、微博、微信 四个圆圈图数据* 思路：现存本地网络缓存中获取数据，有则直接使用* 否则根据日期就是设值*/var localStorageObj = window.localStorage;var textDataStr = localStorageObj["textDataStr"];var textDataJson = {};/**四者初始化大小*/var videoInitSize = 1862343;var newsInitSize = 20853626;var weiboInitSize = 7527789;var weChatInitSize = 1001619;if (textDataStr == undefined) {/**本地不存在时，则第一次存储到本地*/textDataJson = {"news": newsInitSize,"video": videoInitSize,"weibo": weiboInitSize,"weixin": weChatInitSize};/**存储的时候，不能直接存储json对象，而是要转为字符串后再存储*/localStorageObj["textDataStr"] = JSON.stringify(textDataJson);console.log("本地不存在：" + localStorageObj["textDataStr"]);} else {/** 当本地已经存在了时，直接操作本地数据* 取出来的只是普通字符串，所以要转为json*/textDataJson = JSON.parse(textDataStr);newsInitSize = textDataJson["news"];videoInitSize = textDataJson["video"];weiboInitSize = textDataJson["weibo"];weChatInitSize = textDataJson["weixin"];console.log("本地已经存在：" + JSON.stringify(textDataJson));}} else {console.log("当前浏览器不支持localStorage...");}
</script>
浏览器清理缓存
1、浏览器清理缓存后，数据就没有了：
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.localStorage) {console.log("当前浏览器支持localStorage...");var localStorageObj = window.localStorage;var textDataStr = localStorageObj["textDataStr"];console.log("xx："+textDataStr);} else {console.log("当前浏览器不支持localStorage...");}
</script>
2、浏览器清理缓存前，取值是OK的，现在对着Chrome浏览器按快捷键 "Ctrl+Shift+Delete"：
SessionStorage 会话存储
1、SessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
2、在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。完全类似localStorage对象的获取
seesionStorage 与 localStorage 一样采用key-value方式存储。key值相同时，新增的覆盖原有的。value值必须为字符串类型(传入非字符串，也会在存储时转换为字符串，如true值会转换为"true")。
3、sessionStorage 与 localStorage 一样，大多数浏览器把存储大小上限限制在5MB以内
4、不同浏览器无法共享 localStorage或sessionStorage中的数据。相同浏览器中同一个目标服务器下的所有应用的页面间可以共享 localStorage，不同页面或标签页间无法共享sessionStorage的信息。
5、sessionStorage 和 localStorage 使用完全相同的API，所以本文操作部分只做简要描述，详情请参考《Html 5网络存储之 LocalStorage》
|
sessionStorage.setItem("key","value"); //以“key”为名称存储一个值“value”,key相同时会覆盖value sessionStorage["key"] = value; //以“key”为名称存储一个值“value”,key相同时会覆盖value sessionStorage.key = value; //以“key”为名称存储一个值“value”,key相同时会覆盖value |
存 值 |
|
value = sessionStorage.getItem("key"); //获取“key”的value，key不存在时，返回undefined或者null value = sessionStorage["key"]; //获取“key”的value，key不存在时，返回undefined或者null value = sessionStorage.key; //获取“key”的value，key不存在时，返回undefined或者null |
取 值 |
|
//使用 length 属性加 getItem 方法 for(var i=0;i<sessionStorage.length;i++){ var name = sessionStorage.key(i); var value = sessionStorage.getItem(name); } |
枚 举 |
|
sessionStorage.removeItem("key");//删除名称为“key”的信息。 sessionStorage.clear();//清空sessionStorage中所有信息 |
删 除 |
<script type="text/javascript">/*** 判断浏览器是否支持localStorage* 通常都是可以支持的*/if (window.sessionStorage) {console.log("当前浏览器支持sessionStorage...");var sessionStorageObj = window.sessionStorage;sessionStorageObj.setItem("name", "张三");sessionStorageObj.setItem("age", 20);let name = sessionStorageObj.getItem("name");let age = sessionStorageObj.getItem("age");console.log("name：" + name + "、age:" + age);sessionStorageObj.removeItem("age");age = sessionStorageObj.getItem("age");console.log("name：" + name + "、age:" + age);sessionStorageObj.clear();name = sessionStorageObj.getItem("name");age = sessionStorageObj.getItem("age");console.log("name：" + name + "、age:" + age);} else {console.log("当前浏览器不支持sessionStorage...");}
</script>
Html 5 网络存储之 LocalStorage、SessionStorage相关推荐
- 本地存储-cookie|localStorage|sessionStorage|indexedDB
本地存储 本地存储 cookie 如何工作 问题 cookie标准限制 属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...
- Web数据存储之localStorage和sessionStorage
Web数据存储之localStorage和sessionStorage 学习前端以来,自己了解有localStorage和sessionStorage的相关存储的知识,也有实践过,但是之前只限于能用的 ...
- HTML5 Web 存储（localStorage和sessionStorage）
localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在.存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信. // ...
- web存储机制localStorage和sessionStorage
https://www.cnblogs.com/yaoyuqian/p/7901052.html web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别, ...
- localStorage sessionStorage 和cookie等前端存储方式总结
localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...
- html键值对与名称值对的区别,使用网络存储存储键值对的数据-HTML5教程
本节课的内容是介绍网络存储,使用它在浏览器里存储键值对的数据,功能上像以前的cookie一样,不过他更好,存储的数据可以大小.有两种类型的网络存储:本地存储和会话存储,他们使用相同的实现机制,只是可见 ...
- 客户端 localStorage, sessionStorage, cookie 的区别
SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...
- [JavaScript] Cookie,localStorage,sessionStorage概述
Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...
- 本地储存 localstorage sessionstorage 的兼容性，API，特点
在开发中发现cookie储存会在http请求头中,大大影响了数据请求交互. 现在h5中提供了新的解决方式(API) 存储方式: 1.本地储存 localstorage & sessionsto ...
- java localstorage_前端存储除了 localStorage 还有啥
原标题:前端存储除了 localStorage 还有啥 来自公众号: 全栈修仙之路 前端的数据存储方式,你除了用过 Cookies.localStorage 和 sessionStorage 外,还有 ...
最新文章
- 洛谷P3960 列队(动态开节点线段树)
- git 错误 RPC
- hssfworkbook 单元格合并后宽度不生效_Excel表格“假”合并，有多牛？
- 51中断编程c语言,[新人求指教]51C语言编程可否用中断令循环结束提早结束
- java 三位数的水仙花数
- jsp:setProperty
- 浅说深度学习(2)：简史
- C#.Net工作笔记014---C#中internal的意思
- STMP发送邮件被当垃圾邮件处理的解决方法
- python和tableau优缺点_matplotlib和Tableau之间哪一个最好？
- 苹果系统版本依次顺序_苹果手机排列顺序
- 关于Pytorch中detach
- AR软件开发一个要多少钱？分享AR内容制作市价
- 谷歌浏览器chrome翻译插件完美解决开发者模式插件问题
- Python爬虫实战案例：取喜马拉雅音频数据详解
- 车机开发之添加自定义键
- 什么是数字化？企业如何实现数字化？
- 【转】Hadoop学习路线图
- RSD的PANSHARP融合——以GF2为例
- Error while executing: am startservice ***/com.android.tools.fd.runtime.InstantRunS