为什么要使用LocalStorage:
cookie的存储大小较小
cookie所消耗性能较多
LocalStorage与SessionStorage的区别:
LocalStorage会存储到本地,直到手动清除。
SessionStorage存活在当前页面的生命周期,一旦页面关闭,存储的数据也会消失
LocalStorage的基本使用方法:
存储数据:
localStorage.setItem('key','需要存储的数据');
获取数据:
var value=localStorage.getItem('key');
删除数据:
localStorage.removeItem('key');
案例-离线记事本
index.html
<
html
>
<
head
>
<
meta
charset=
"utf-8"
>
<
title
>随手记
</
title
>
</
head
>
<
body
>
<
h2
>随手记--实时保存
</
h2
>
<
div
>
<
textarea
id=
"content"
cols=
"100"
rows=
"20"
></
textarea
>
</
div
>
<
script
src=
"main.js"
>
<
/
script
>
</
body
>
</
html
>
main.js
//获取记录内容的文本域
var
el=
document.
querySelector(
'#content');
//页面载入时,从本地获取存储的数据
el.
value=
localStorage.
getItem(
'data') ||
'';
//为文本域dom节点添加blur事件
el.
addEventListener(
'blur',
function(){
//获取文本域的内容
var
data=
el.
value;
//保存到本地
localStorage.
setItem(
'data',
data);
})