LocalStorage的使用

为什么要使用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);

})