LocalStorage的简介(和cookie)
来源:互联网 发布:php magic quotes gpc 编辑:程序博客网 时间:2024/05/21 17:13
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4K),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
LocalStorage的优点:
localStorage扩展了cookie的4K限制,可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的这对于前端页面的数据库,相对于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的(IE8以上,chrome4以上)
局限:
浏览器的大小不统一,比你在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在我们日常比较常见的json对象类型需要一些转换。
localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
localStorage不能被爬虫抓取到。
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionhStorage属于当会话结束的时候,sessionStorage中的键值对会被清空。
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换为字符串形式,这个时候我们可以使用JSON.stringfy()这个方法,来将JSON转换成为JSON字符串。
读取之后,要将JSON字符串转换成为JSON对象,使用JSON.parse()方法。
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
localStorage生命周期是永久的,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意到是,页面即标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
附:同源的判断规则:
http://www.test.com
https://www.test.com(不同源,因为协议不同)(后文有讲http和https的区别)
http://my.test.com(不同源,因为主机名不同)
http://www.test.com:8080(不同源,因为端口不同)
localStorage和sessionStorage使用相同的API
localStorage.setItem(”key”,”value”);//以”key”为名称存储一个值”value”.
localStorage.getItem(“key”);//获取名称为key的值
枚举localStorage的方法:
For(var i=0;i<localStorage.length;i++){
Var name=localStorage.key(i);
Var value=localStorage.getItem(name);
}
删除localStorage中存储信息的方法:
localStorage.removeItem(“key”);//删除名称为”key”的信息
localStorage.clear();//清空localStorage中所有信息。
通过getItem或直接使用localStorage[“key”]获取到的信息均为实际存储的副本
localStorage.key={value1:”value1”};
localStorage.key.value1=”a”;
这里是无法对实际存储的值产生作用的,下面的写法也不可以
localStorage。getItem(“key”).value1=”a”;
localStorage自带的一些方法,常用的API的目录
Clear
清空localStorage上存储的数据
getITem
读取数据
hasOwnProperty
检查localStorage上是否保存了变量X,需要出入x
Key
读取第i个数据 的名字或称为键值(从0开始计数)
Length
localStorage存储变量的个数。
PropertyIsEnumerable
用来检测属性是否属于某个对象的
RemoveItem
删除某个具体变量
setItem
存储数据
toLocalString
将(数组)转为本地字符串
ValueOf
获取所有存储的数据
- LocalStorage的简介(和cookie)
- cookie和localStorage的区别
- cookie和sessionStorage和localStorage的区别
- cookie ,session 和localStorage的区别详解
- sessionStorage 、localStorage 和 cookie 之间的区别
- sessionstorage,localstorage和cookie之间的区别
- sessionStorage localStorage 和 cookie 的区别
- cookie、sessionStorage和localStorage的区别
- cookie ,session 和localStorage的区别详解
- sessionStorage 、localStorage 和 cookie 之间的区别
- cookie与HTML5的localStorage和sessionStorage
- sessionStorage localStorage 和 cookie 之间的异同
- sessionStorage 、localStorage 和 cookie 之间的区别
- cookie ,session 和localStorage的区别详解
- sessionStorage 、localStorage 和 cookie 之间的区别
- cookie、sessionStorage和localStorage的区别
- cookie、localStorage和session的小练习
- sessionStorage localStorage 和 cookie 之间的区别
- Vuex Demo 讲解
- connect()
- UVa10791
- Hadoop生态圈各组件的启动及关闭
- 初学mybatis1
- LocalStorage的简介(和cookie)
- Python 函数
- c++创建多级目录
- 误删JDK注册表或JDK卸载不干净
- Android自定义View基础部分
- Vue 组件库实践和设计
- 微信公众号模板消息管理
- 类的六个默认成员函数
- floyd的总结