资讯专栏INFORMATION COLUMN

Web Storage--HTML5本地存储

lykops / 3184人阅读

摘要:什么是是里面引入的一个类似于的本地存储功能,可以用于客户端的本地存储,其相对于来说有以下几点优势存储空间大只有的存储空间,而在官方建议中为每个网站。而则是将数据存储在本地,理论上来说数据永远不会消失,除非人为删除。

什么是Web Storage

Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点优势:

存储空间大:cookie只有4KB的存储空间,而Web Storage在官方建议中为每个网站5M。

可选择性强:Web Storage分为两种:sessionStoragelocalStorage

Web Storage的使用方法

在使用上,session Storagelocal Storage大同小异,只是session Storage是将数据临时存储在session中,浏览器关闭,数据随之消失。而local Storage则是将数据存储在本地,理论上来说数据永远不会消失,除非人为删除。

API:

保存数据 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

读取数据 localStorage.getItem( key ); sessionStorage.getItem( key );

删除单个数据localStorage.removeItem( key ); sessionStorage.removeItem( key );

删除全部数据localStorage.clear( ); sessionStorage.clear( );

获取索引的keylocalStorage.key( index ); sessionStorage.key( index );

注意:Web Storage的API只能操作字符串

在使用Web Storage之前,我们需要注意以下几点:

仅支持支持IE8及以上版本

由于只能对字符串类型数据进行操作,所以对一些JSON对象需要进行转换

因为是明文存储,所以毫无隐私性可言,绝对不能用于存储重要信息

会是浏览器加载速度在一定程度上变慢

无法被爬虫程序爬取

使用Web Storage之前,请加上以下代码,对浏览器对Web Storage的支持性进行判断

if(window.localStorage){//或者window.sessionStorage     
    alert("浏览器支持localStorage")
    //主逻辑业务
}else{      
    alert("浏览不支持localStorage")
    //替代方法
}   
  

我们来写一个学生管理小程序用于演示Web Storage的基本用法

简单的html页面先准备好

    












在这个程序里面我们将实现增删查的基本功能,修改数据的功能相信大家看完后自己就能写出来。

接下来开始写方法:

存储

//利用localStorage存储数据
function save() {
    var contact = new Object();
    var Name = document.getElementById("name").value;
    var Sex = document.getElementById("sex").value;
    var Num = document.getElementById("num").value;
    var Add = document.getElementById("add").value;
    var Tel = document.getElementById("tel").value;
    if(JTrim(Name) != "" && JTrim(Sex) != "" && JTrim(Num) != "" && JTrim(Add) != "" && JTrim(Tel) != "") {
        contact.name = Name;
        contact.sex = Sex;
        contact.num = Num;
        contact.add = Add;
        contact.tel = Tel;
        var str = JSON.stringify(contact);//对JSON对象进行处理,用于从一个对象解析出字符串
        if(window.localStorage) {
            localStorage.setItem(contact.name,str);
        } else {
            alert("您暂时还无法使用本功能");
            return;
        }
    } else {
        alert("请输入内容");
    }
}

其中用到了Trim()这个方法,用于判断输入是否为空

function JTrim(s) {
    return s.replace(/(^s*)|(s*$)/g, "");
}

展示所有信息

function loadAll() {
    var resource = document.getElementById("list");
    if(window.localStorage) {
        var result = "";
        result += "";
        for(var i = 0;i < localStorage.length; i++) {
            var Name = localStorage.key(i);//用于得到索引的key,在这个程序里,key为name
            var str = localStorage.getItem(Name);
            var contact = JSON.parse(str);//对JSON对象进行处理,用于从一个字符串中解析出JSON对象
            result += ""; 
        }
        result += "
姓名性别学号家庭住址电话号码
"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"
"; resource.innerHTML = result; } else { alert("您暂时还无法使用本功能"); return; } }

查询

function search() {
    var resource = document.getElementById("tato");
    var search_name = document.getElementById("search_name").value;
    if(window.localStorage) {
        var str = localStorage.getItem(search_name);
        if(str != null) {
            var result = "";
            result += "";
            var contact = JSON.parse(str);
            result += "";
            result += "
姓名性别学号家庭住址电话号码
"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"
"; resource.innerHTML = result; } else { alert("系统无此人"); return; } } else { alert("您暂时还无法使用本功能"); return; } }

删除

function del() {
    var del_name = document.getElementById("del_name").value;
    if(window.localStorage) {
        var result = localStorage.getItem(del_name);
        localStorage.removeItem(del_name);
        if(result != null) {
            alert("删除成功");           
        } else {
            alert("系统无此人");
            return;
        }

    } else {
        alert("您暂时还无法使用本功能");
        return;        
    }
}

在这里如果想对所有数据做删除处理则只需将localStorage.removeItem();换成localStorage.clear();即可

Demo地址--魔改了一下界面,开心就好=.=

现在让我们在浏览器的开发者工具里面看一看Web Storage到底是怎么存储的

我们可以在chrome开发者工具里面找到Application这个选项,其中就有今天的主角:Local StorageSession Storage

现在输入一些数据

点击提交之后我们立刻就能在Local Storage里面看到明文存储的数据(后面的value是以JSON对象来存储的,所以在对其进行操作的时候需要转换格式)

总结

Web Storage固然简单实用,但是数据的明文存储实在是硬伤,所以各位使用之前请三思

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86664.html

相关文章

  • Web Storage--HTML5本地存储

    摘要:什么是是里面引入的一个类似于的本地存储功能,可以用于客户端的本地存储,其相对于来说有以下几点优势存储空间大只有的存储空间,而在官方建议中为每个网站。而则是将数据存储在本地,理论上来说数据永远不会消失,除非人为删除。 什么是Web Storage Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点...

    mtunique 评论0 收藏0
  • 本地存储——Cookie与Web Storage

    摘要:是客户端用来存储数据的它既可以在客户端设置也可以在服务器端设置。会跟随任意请求一起发送标准中的包括了两种存储方式和用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 Cookie cookie是客户端用来存储数据的,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送 Web Storage htm...

    mating 评论0 收藏0
  • Web Storage 与cookies

    摘要:和虽然也有存储大小的限制,但比大得多,可以达到或更大支持事件通知机制,可以将数据更新的通知发送给监听者。有时也用,指某些网站为了辨别用户身份,进行跟踪而存储在本地终端上的数据,通常经过加密。 Web Storage介绍 Web Storage带来的好处 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传...

    zhkai 评论0 收藏0
  • Web Storage 与cookies

    摘要:和虽然也有存储大小的限制,但比大得多,可以达到或更大支持事件通知机制,可以将数据更新的通知发送给监听者。有时也用,指某些网站为了辨别用户身份,进行跟踪而存储在本地终端上的数据,通常经过加密。 Web Storage介绍 Web Storage带来的好处 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传...

    Achilles 评论0 收藏0
  • 我的大前端- 收藏集 - 掘金

    摘要:下面围绕的这样的目的,即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能,感觉非常不错。正如你期望的,文中的闯关记之垃圾回收和内存管理前端掘金题图来源,授权基于协议。 微信小程序实战学习 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序?大场景? 微信小程序本质上来说就是一个 HTML 5(移动网页) 应用,用view、scoll-view代替了div标...

    LdhAndroid 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<