您当前的位置: 网站优化建站常识

HTML5本地存储之Web Storage详解

发布于:2016-07-09 23:29:38  作者:徐文海网络   点击:

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保存的数据一直在本地,徐文海seo,除非用户或程序显式地清楚,否则这些数据会一致存在。

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页面

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>HTML本地存储之web storage</title>  

    <style type="text/css">  

        #content{   

            border: 1px solid #3D19DD;   

            width:600px;   

            text-align:center;   

            padding: 10px 0;   

            margin: 0 auto;   

        }   

        #content input{   

            margin-top: 10px;   

        }   

    </style>  

</head>  

<body>  

    <div id="content">  

         <label for="user_num">学号:</label>     

        <input type="text" id="user_num" name="user_num" />  

        <br/>  

本文关键词: html5| 本地存储| Web| Storage|

[相关阅读]

我们介绍

  徐文海网络科技工作室,专业从事石家庄百度优化,石家庄网站建设,石家庄网络公司,石家庄网站制作,石家庄网站优化,石家庄软件制作。如果您感觉我们不错请分享↓给更多的人