在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。
以下是localStorage 和sessionStorage的区别
(1)localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
(2)他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
(3)localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
(4)sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
(5)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
这里我们以localStorage来分析
localStorage的使用
首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性
<code>if
(!window
.localStorage){ alert("浏览器支持localstorage"
);return
false
;}else
{ /<code>
存值共有3种方式,localStorage相当于window对象下面的一个属性,所以有[]和.调用,但也具有自身的setItem方法:
<code>// 自身方法localStorage.setItem("name"
,"bonly"
);// []方法localStorage["name"
]="bonly"
;// .方法localStorage.name="bonly"
;/<code>
取值也是如此,自身的方法是getItem。
<code>// 自身方法localStorage.getItem("name"
);// []方法localStorage["name"
];// .方法localStorage.name;/<code>
改变的方式,就是相当于给对应的key重新赋值,就会把原来的值覆盖掉。
<code>// 自身方法localStorage.setItem("name"
,"TOM"
);// []方法localStorage["name"
]="TOM"
;// .方法localStorage.name="TOM"
;/<code>
移除某一个值,可以通过对象删除属性的关键字delete也可以用自身的方法removeItem。
<code>//
自身方法localStorage.removeItem("name"
);//
[]方法delete
localStorage["name"
];//
.方法delete
localStorage.name/<code>
获取所有的key。
<code>//
通过自身的keyfor (var i=0
;iconsole.log(localStorage.key(i));}//
通过for
in
循环获取for
(var keyin
localStorage){console
.log(key);}/<code>
6.获取所有的值
<code>localStorage
.valueOf
();取出所有的值/<code>
7.清除所有的值
<code>localStorage
.clear
()/<code>
8.判断是否具有某个key,hasOwnProperty方法
<code>localStorage.hasOwnProperty("name"
)// 如果存在的话返回true
,不存在返回false
/<code>
localStorage其他注意事项
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
示例:
<code>if
(!window
.localStorage){ alert("浏览器支持localstorage"
);}else
{var
storage=window
.localStorage;var
data={name
:'xiecanyong'
,sex
:'man'
,hobby
:'program'
};var
d=JSON
.stringify(data); storage.setItem("data"
,d);console
.log(storage.data);}/<code>
读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法。
<code>var
storage=window
.localStorage;var
data={name
:'xiecanyong'
,sex
:'man'
,hobby
:'program'
};var
d=JSON
.stringify(data);storage.setItem("data"
,d);/<code>
打印出来是Object对象
另外还有一点要注意的是,其他类型读取出来也要进行转换
使用技巧
1.先判断浏览器是否支持localStorage,通过if(!window.localStorage) return;
2.单词太长,不方便书写,可以利用 var storage=window.localStorage;
3.字符串和原始类型需要通过JSON.stringfy转字符串,通过JSON.parse转成对象
4.通过封装方法实现来回转化
sessionStorage
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 该数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。
语法:
<code>window
.sessionStorage/<code>
保存数据语法:
<code>sessionStorage
.setItem
("key"
,"value"
);/<code>
读取数据语法:
<code>var
lastname = sessionStorage.getItem("key"
);/<code>
删除指定键的数据语法:
<code>sessionStorage
.removeItem
("key"
);/<code>
删除所有数据:
<code>sessionStorage
.clear
();/<code>
实例:以下实例用于记录点击按钮的次数:
Markup
<code> ><
html
><
head
><
meta
charset
="utf-8"
><
title
>Web前端之家(https://www.jiangweishan.com)title
><
script
>
function
clickCounter
() {if
(typeof
(Storage) !=="undefined"
) {if
(sessionStorage.clickcount) { sessionStorage.clickcount =Number
(sessionStorage.clickcount)+1
; }else
{ sessionStorage.clickcount =1
; }document
.getElementById("result"
).innerHTML ="你在按钮上已经点击了 "
+ sessionStorage.clickcount +" 次。"
; }else
{document
.getElementById("result"
).innerHTML ="Sorry, your browser does not support web storage..."
; } }script
>head
><
body
><
p
><
button
onclick
="clickCounter()"
type
="button"
>点我!button
>p
><
div
id
="result"
>div
><
p
>点击按钮查看数字变化。p
><
p
>关闭浏览器并重新打开,看看数值是否重置了。p
>body
>html
>/<code>