web storage

首先我们来了解一下

 

cookie和session的区别:

 

cookie：数据存放在客户的浏览器，永久的，cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session ,单个cookie不能超过4kb。

session：数据放在服务器上，临时的（浏览器关闭 数据消失），session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
   考虑到减轻服务器性能方面，应当使用COOKIE。

 

web storage 

 web 上的存储数据的功能 针对于客户端本地而言

 

HTML5 提供两种web存储方法，localStorage 与 sessionStorage

localStorage 与 sessionStorage 区别

localStorage没有过期时间，只要不clear或remove，数据会一直保存。

sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

特点：

1.localStorage 默认支持的容量为一个站5M，当调用setItem超过上限时，会触发QuotaExceededError异常。当然有些浏览器支持修改容量上限，但为了兼容其他浏览器，最好按5M的容量来使用。

2.localStorage 是以key-value形式保存数据的，key和value只能是字符串格式。因此数字1保存后，会转换成字符串1。

3.localStorage 的写入与读取写法有以下几种：

 

方式一：

localStorage.name = 'fdipzone'; //写入数据
name = localStorage.name;  //读取数据

方式二：

localStorage['name'] = 'fdipzone';//写入数据

name = localStorage['name'];//读取数据

方式三：（备注：也是最正规的写法。）

localStorage.setItem('name', 'fdipzone');//写入数据 

 name = localStorage.getItem('name'); //读取数据

localStorage[key] = value写法主流浏览器都支持，官方并没有说明那一种写法是标准。但如果执行以下的代码就使localStorage失效。

localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;

使用setItem(), getItem(), removeItem(), clear()来实现写入，读取，删除，清空。

 

sessionStorage的写入与读取写法有：

sessionStorage.setItem("mymessage", str);//保存数据库
sessionStorage.getItem("mymessage");//读取数据

其中 name和mymessage是 自定义的关键字！

 

要写入多条数据存储可以通过改变key的值 ，代码如下：

 

function iocalStorage(id) {
    var traget = document.getElementById(id);
    var str = traget.value;
    if(str=="")
    {
        alert("输入值不能为空");
    }
    else
    {
        var timer=new Date().getTime();
        localStorage.setItem(timer, str);
        alert("你好已保存");
    }
}

<input class="txt" type="text" id="iocal_input"> <input type="button" value="保存数据" onclick="iocalStorage('iocal_input')">

 

要读出多条数据存储可以通过循环 ，代码如下：

 function readiocal(id) {
        var traget = document.getElementById(id);
        var msg = localStorage.getItem("message");

        for(var i=0;i<localStorage.length;i++)
        {
            var key=localStorage.key(i);
            traget.innerHTML+=key+":"+localStorage.getItem(key)+"<br/>";
        }


    }//一直存在

<input type="button" value=" 读取数据" onclick="readiocal('iocal_msg')">