你可能需要好好认识一下这个LocalStorage(本地存储)
我们在了解LocalStorage之前,不妨先了解一下Web的存储机制:
Web Storage 最早是在Web超文本应用技术工作组(WHAT_WG)的Web应用1.0规范中描述的。这个规范最初的工作最终成为了HTML5 的一部分。Web Storage 的目的是为了克服有 cookie 带来的一些限制,Cookie存储的数据量非常小,而且当数据需要被严格控制在客户端上时,无须持续地将数据发送回服务器,所以可能会造成带宽的浪费。
Web Storage 提供了两个存储对象:localStorage 和 sessionStorage。
- sessionStorage 对象存储特定于某个会话的数据,也就是该数据只会保持到浏览器关闭,会话结束后会自动失效。存储在 sessionStorage 中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(Firefox和WebKit都支持,IE不支持)。
- localStorage 对象可以永久存储,而且同源下数据多窗口也能共享。But!localStorage也是有限制的,大多数桌面浏览器都会设置每个来源5MB的限制(Chrome和Safar对每个来源的限制是2.5MB)。虽然对每个来源的大小进行限制,但是要知道,Cookie只有4K 的大小,所以这些限制是不足以成为大家使用 localStorage 的障碍的。
好了!关于Web的存储机制就先介绍到这里,如果大家对这方面感兴趣,可以评论区留言,我会另开一个专题进行讲解Web的存储机制。
一、什么是 localStorage :
上面的内容大家也都看到了,应该对 localStorage 也已经有了一个初步的印象了。什么??在总结一遍??那么接着往下看吧。
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。它通常只能存储String类型的数据,所以最好在每次存储时把数据转换成JSON格式,取出的时候再转换回来。
二、localStorage 的使用:
在使用之前需要注意两点:
首先在 setItem 存储数据时,可能会达到大小限制,或者是JSON.parse 解析的字符串不符合json规则也很有可能报错,所以在使用的时候最好加上错误捕获:
// try catch 结构:try{// 我们把有可能报错的内容放入try之中执行;// 报错了不会影响代码的继续执行;// 会把错误信息放到 catch 里面的参数 e 之中;可以通过 e 进行错误排查;}catch( e ){}
另外在存储容量快满时,会造成getItem性能的急剧下降。
现在正式介绍一下 localStorage 的使用方法:
- localStorage.setItem(“key”,“value”):存储名字为key的一个值value,如果key存在,就更新value;
//存储数据 : // 使用方法存储数据localStorage.setItem("test" , "hello world1"); // 设置test为 hello world1localStorage.setItem("test" , "hello world2"); // 覆盖之前的值,现在test为 hello world1// 使用属性存储数据localStorage.test3 = "hello word3";
- localStorage.getItem(“key”):获取名称为key的值,如果key不存在则返回null
// 获取数据 // 使用方法读取数据var res = localStorage.getItem("test");console.log(res);// 使用属性读取数据var test3 = localStorage.test3;console.log(test3 );
- localStorage.removeItem(“key”):删除名称为“key”的信息,这个key所对应的value也会全部被删除
// 删除数据;localStorage.removeItem("test");
- localStorage.clear():清空localStorage中所有信息
// 清空数据;localStorage.clear();
- key():向其中输入索引即可获取对应的键值
var storage=window.localStorage;storage.setItem("test1" , "hello world1");storage.setItem("test2" , "hello world2");// 遍历数据,取出每一条数据的key值for(var i=0;i<storage.length;i++){var key=storage.key(i);console.log(key);}
三、与 JSON 的配合使用:
对于前端来说存储复杂数据最方便的结构是什么呢?
当然是 数组 + 对象
那么,我们考虑是否可以将对象、数组内容放入到 localstorage 之中进行存储呢 ?
我们要知道:
localstorage:只允许存储字符串;
JSON 是字符串结构;标准的json对象{“name” : “jack”}
JSON.stringify(); 将json格式的数据(JavaScript 对象)转换成JSON格式的字符串
var data = {name:"jack"};data = JSON.stringify(data);localStorage.setItem("data1",data);
JSON.parse(); 将JSON格式的字符串转换成JSON对象进行处理
var str = localStorage.getItem("data1");var obj = JSON.parse(str);console.log(obj);
四、localStorage 的优缺点:
· localStorage 的优势:
- localStorage 拓展了 cookie 存储空间只有的 4K 限制
- localStorage 会将请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个也是有局限性的
· localStorage 的局限:
- 浏览器的存储空间大小不统一,并且在IE8以上的IE版本才支持 localStorage 这个属性
- 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型,这个在对我们日常比较常见的 JSON 对象类型需要一些转换
- localStorage 在浏览器的隐私模式下面是不可读取的
- localStorage 本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
- localStorage 不能被爬虫抓取到
· localStorage 浏览器兼容情况:
喜欢的朋友可以点点关注,点点赞,欢迎评论区留言互动。
你可能需要好好认识一下这个LocalStorage(本地存储)相关推荐
- html5保存资源本地,html5之Localstorage本地存储
题外话 今天把博客里面的内容,同步在github的issues中了.具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star. L ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- js本地存储函数封装基于localStorage本地存储
函数封装 //基于localStorage本地存储 var store={set:function(name, value, day) { // 设置let d = new Date()let tim ...
- JS9day(BOM对象模型,setTimeout定时器,JS单线程执行机制,location对象,swiper插件,localStorage本地存储,购物车案例升级版,学习信息案例(本地存储))
文章目录 BOM简介 定时器-延时函数 5秒关闭广告案例 递归模拟setInterval函数 两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
- HTML5 API详解(9):大家都知道的 localStorage 本地存储
提到本地存储localStorage就不得不提sessionStorage和cookie这两个.其中localStorage和sessionStorage可以合成称为web Storage. 这里比较 ...
- HTML5 LocalStorage 本地存储
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- localstorage本地存储
本文来自:http://2806814127.iteye.com/blog/2314656 本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以 ...
- HTML5 LocalStorage 本地存储,刷新值还在
这里是新手了解,生产用到的话,请移到具有兼容性好的 store.js H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStor ...
- HTML5 LocalStorage 本地存储原理详解
说到Web开发中的本地存储,大家最先想到的应该就是Cookies这玩意了,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太 ...
最新文章
- 链表的有序集合_JAVA
- 自动抢红包,自动安装原理之AccessibilityService
- Yaas上传附件的技术实现
- build libusb for Android
- jquery 下拉框 select2 运用 笔记
- 3.10 SE11创建类型组
- asp.net的一些对话
- XMPP基本概念--节(stanza)
- 谷歌发布基于浏览器的 Spectre 攻击的 PoC exploit
- php动态页面在ie浏览器中css布局板块全缩在中间,CSS网页布局开发时的常见问题及解决方法...
- 有效的python属性管理:描述符的使用
- vfp 使用 .Net 系统自带的组件
- 中了磁碟机病毒,惨啊!!!
- 语音处理:音频信号采样点白化方法初探
- php hash 文件,php对文件进行hash运算
- python common很久不用我都忘了一些函数了,给boss添麻烦了
- c语言编程余弦,C语言实例编程绘制余弦曲线
- 消息队列和多线程的选择
- 基于springboot地方旅游系统的设计与实现
- 后腰椎间盘突出时期的生活