博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
localStorage详细总结
阅读量:5214 次
发布时间:2019-06-14

本文共 1672 字,大约阅读时间需要 5 分钟。

一、localStorage简介:

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

 

二、localStorage的优势与局限:

优势:

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

 

局限:

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

5、localStorage不能被爬虫抓取到

 

三、localStorage的使用:

localStorage是html5的新特性,所以并不是所有的浏览器都支持,因此在使用localStorage时需要先判断浏览器是否支持localStorage。

下面这段代码就是用来判断浏览器是否支持localStorage

    
localStorage

  

既然localStorage是用来存取数据的,那我们先从localStorage存数据开始说起

    
localStorage

  

上面的代码我们在localStorage中存取了一个字段a,值是"我是a"

localStorage支持多种存取值的方式,我们一一来看一下

    
localStorage

  

上面介绍了localStorage存值与取值的三种方式,具体用哪种方式都可以,其中官方推荐的是getItem\setItem这两种方法对其进行存取

 

那么数据存放进去我们如果想要修改该怎么办?别急,看下面代码:

    
localStorage

  

localStorage的删除:

1、清空localStorage:调用localStorage的clear方法将清空localStorage中的所有内容

    
localStorage

  

2、删除某个值:调用localStorage的removeItem()方法删除某个值

    
localStorage

  

localStorage的键获取

    
localStorage

  

 

四、localStorage的注意事项:

1、localStorage中存放的是String类型的值

    
localStorage

  

我们看到上述代码打印的结果为string,虽然我们存放的是int类型的值,但是localStorage还是把它当做string类型来存放

 

2、如果我们需要将JSON格式的数据存放到localStorage中,则需要借助JSON.stringify()这个方法,来将JSON转换成为JSON字符串

    
localStorage

  

读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

    
localStorage

  

转载于:https://www.cnblogs.com/wgblog-code/p/11549707.html

你可能感兴趣的文章
mybatis的mapper映射文件中where,if,foreach等的使用
查看>>
Python的图形化界面
查看>>
ios NSNotificationCenter消息注册与撤销
查看>>
C#计算一段程序运行时间的三种方法
查看>>
[HNOI2008]GT考试
查看>>
[HAOI2007]理想的正方形
查看>>
java socket编程
查看>>
scrapy爬虫系列之开头--scrapy知识点
查看>>
effective c++ 之std::thread 绑定类函数
查看>>
webstorm+react+webpack-demo
查看>>
ARDUINO+MCP2515实现CAN通讯接收
查看>>
Objective-C: NSFileManager 的使用
查看>>
maven安装和eclipse集成遇到的问题
查看>>
BZOJ4668 冷战(并查集)
查看>>
Mail.Ru Cup 2018 Round 3
查看>>
错误总结
查看>>
最长递增子序列的数量 51Nod - 1376
查看>>
期中作业201306114104彭得源
查看>>
curl 取不到第二个参数解决方法
查看>>
tomcat设置端口号,访问指定ip就访问指定项目
查看>>