HTML5当地存储之WebStorage--百分百源码网

HTML5当地存储之WebStorage-

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要为大家细致介绍了HTML5当地存储之WebStorage的相干材料，WebStorage怎样用JSON存储多个数据，感乐趣的小同伴们可以参照一下这篇文章主要为大家细致介绍了HTML5当地存储之Web Storage的相干材料，Web Storage怎样用JSON存储多个数据，感乐趣的小同伴们可以参照一下

在HTML5涌现以前，要是开发者需要在客户端存储少量的数据，只能通过cookie来实现，但是cookie存在几个不够点：

?每个域名下cookie的大小限定在4KB。
?cookie会包括在每个http要求中，这样会致使发送反复的数据。
?cookie在网络传输历程中没有加密，存在平安隐患。

在HTML5新增了Web storage功能，Web Storage官方倡议为每个网站是5MB，能存储比cookie更多的数据，而且拥有比cookie更强大的功能。Web Storage此刻已经得到了Firefox、Opera、Chrome、Safari各主流阅读器的支撑。

Web Storage简介

Web Storage又分为Session Storage和Local Storage：

Session Storage：与session相似，Session Storage保留的数据生存限期与Session限期雷同，会员Session完毕时，Session Storage保留的数据也就消散了。

Local Storage： Local Storage保留的数据不断在当地，除非会员或程序显式地分明，不然这些数据会一致存在。

window对象中供给了sessionStorage和localStorage两个属性，这两个属性离别代表了Session Storage和Local Storage。这个两个功能和用途险些是雷同的，只是它们保留数据的生存限期不一样罢了。storage供给了下列属性和办法（以localStorage为例）：

?localStorage.length：猎取key-value对的数量；
?localStorage.key(index)：猎取第index索引的key；
?localStorage.getItem(key)：猎取指定key对应的value；
?localStorage.setItem(key,value)：保留指定的key-value对；
?localStorage.removeItem(key)：删除指定key对应的key-value对；
?localStorage.clear()：删除所有key-value对。
需要注意的是，key和value都必需为字符串，换言之，web Storage的API只能操纵字符串。那么一些不是字符串的数据，我们可以通过JSON等方式将其转化成字符串格局后在操纵。

Web Storage用JSON存储多个数据

我们通过一个小程序来熟知一下相干属性和办法的根本用途：

?录入学生的根本信息（包含学号，姓名，年级，性别），以学号为key值来存储到local storage中；
?通过学号来查询学生的根本信息；
?显示全部学生的信息；
第一我们设计HTML页面

HTML当地存储之web storage

学号：
姓名：
年级：
性别：

输入学号：

通过JS实现学生信息保留到local storage中，通过剖析我们发明需要保留的学生信息包含多个字段，这时，我们可以应用JSON的stringify()办法，将复杂对象改变成字符串，存入Web Storage中；当从Web Storage中读取时，可以通过JSON的parse()办法再转换成JSON对象：

function save(){     
        var user_num = document.getElementById("user_num").value;   
        var user_nameElement = document.getElementById("user_name").value;   
        var gradeElement = document.getElementById("grade").value;     
        var sexElement = document.getElementById("sex").value;   
        var msg = {   
            user_name: user_nameElement,   
            grade: gradeElement,   
            sex: sexElement,   
        };    
        localStorage.setItem(user_num,JSON.stringify(msg));     
    }

我们往localStorage里存入三条学生信息，并查看localStorage中的存储信息：

用JS实现通过学号查寻学生信息时，需要注意掏出的value值为JSON字符串，需要通过JSON的parse()办法再转换成JSON对象，代码如下：

function find(){     
        var user_num = document.getElementById("search_num").value;    
        var str = localStorage.getItem(user_num);    
        var msg = JSON.parse(str);    
        var find_result = document.getElementById("find_result");     
        find_result.innerHTML = "学号为："+user_num+"的根本信息： 姓名："+msg.user_name + "，年级：" + msg.grade+",性别："+msg.sex;     
    }

同理，显示全部学生信息时，也同样需要将掏出的value字符串转换成JSON对象：

function show(){     
        var list = document.getElementById("list");     
        if(localStorage.length>0){     
            var result = "";     
            result += "";     
            for(var i=0;i";     
            }     
            result += "学号 姓名 年级 性别
"+msg.user_name+" "+msg.grade+" "+msg.sex+"";     
            list.innerHTML = result;     
          }else{     
                list.innerHTML = "目前尚无数据";     
          }     
    }

最后的结果图如下：

保留图片的函数如下：

function setImg(key,src){   
        var img = document.createElement('img');   
        //当图片加载完成的时候触发回调函数 
        img.addEventListener("load",function(){   
            var imgCanvas = document.createElement("canvas"),   
            imgContext = imgCanvas.getContext("2d");   
        //确保canvas元素大小和图片的尺寸一致 
        imgCanvas.width = this.width;   
        imgCanvas.height = this.height;   
        //渲染图片到canvas中 
        imgContext.drawImage(this,0,0,this.width,this.height);   
        //用data url的情势掏出 
        img.crossOrigin = "*"; //防止跨域取相片出错 
        var imgAsDataURL = imgCanvas.toDataURL("image/png");   
        //保留到当地存储中 
        try{   
            localStorage.setItem(key, imgAsDataURL);   
        }   
        catch(e){   
            alert("保留失败！请重试。。。");   
        }   
        }, false);   
        img.src = src;   
    }

该函数接收两个参数，一个是key值，还有一个是图片的途径，通过setImg(“img1”,”1.jpg”)保留图片到localStorage，我们可以查看Local Storage的存储状况：

猎取并显示的代码函数如下：

function getImg(key){   
        var srcStr = localStorage.getItem(key);   
        var imgObj = document.createElement('img');   
        imgObj.src = srcStr;   
        document.body.appendChild(imgObj);   
    }

该函数只接收一个参数：需要查寻图片的key值：

以上就是HTML5当地存储之Web Storage的细致内容，更多请关注百分百源码网其它相干文章！

打赏