JavaScript学习——WebStorage

    Cookie可以实现客户端存储少量数据的功能，但是每个网站只能存储4KB数据，使用Web Storage可以存储1~5MB。Cookie在每次处理网页请求的时候都会连带发送到服务器端，安全性低。但是他们都是以 key-value键值对保存数据的。

不同的Web Storage类型

类型	生命周期	有效范围
localStorage	执行删除命令才会消失	同一网站的网页可以跨窗口和分页
sessionStorage	浏览器窗口或分页（tab）关闭就会消失	仅对当前浏览器窗口或分页有效

    对于扩展功能而言，比较稳妥的做法是加入一个判断语句，确定浏览器是否支持对应功能。

if(typeof(Storage)=="undefind")
{
    alert("您的浏览器不支持Web Storage")
}else{
     //localStorage及sessionStorage程序代码
}

    localStorage的三种访问方法：

1、Storage对象的setItem和getItem方法：

window.localStorage.setItem(key, value);
eg. window.localStorage.setItem("data", "Hello");
window.localStorage.getItem(key);

2、数组索引

window.localStorage["data"] = "Hello";  //存储
var val = window.localStorage["data"];  //读取

3、属性

window.localStorage.data = "Hello";  //存储

var val = window.localStorage.userdata;    //读取

localStorage数据的删除方法

window.localStroage.removeItem("data");

delete window.localStorage.data;

delete window.localStorage["data"];

    如果想要删除localStorage的全部数据，可以使用

localStorage.clear();

    sessionStorage数据的处理语句和localStorage基本一样，只是将对语句中的localStorage->sessionStorage。

小技巧：

    组件id.style.display='none';   /*隐藏登录按钮， 将'none'换为' '即恢复显示*/

    利用JS在动态增加网页组件内容。目前笔者接触过的有两种：innerHTML属性和insertAdjacentHTML()方法。

<div id="show"></div>

show.innerHTML="已成功登出!!";

    insertAdjacentHTML()方法的语法：

element.insertAdjacentHTML(position, html);

element指原组件，position指插入html的位置

参数	说明
beforeend	原内容之后加入新的html
beforebegin	<div>之前加入新的html
afterbegin	原内容之前加入新的html
afterend	</div>之后加入新html