您当前位置:首页 > 文章中心 > HTML5+CSS3 > HTML5

HTML 5 Web 存储

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2013-10-07   阅读次数: 180   查看权限: 游客查看

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储
//localStorage 方法
//localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
<script type="text/javascript">
    if (localStorage.pagecount) {
        localStorage.pagecount = Number(localStorage.pagecount) + 1;
    } else {
        localStorage.pagecount = 1;
    }
    document.write("Visits " + localStorage.pagecount + " time(s).");
</script>
//sessionStorage 方法
//sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
<script type="text/javascript">
    if (sessionStorage.pagecount) {
        sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
    } else {
        sessionStorage.pagecount = 1;
    }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
或者使用它的API:
//清空storage
localStorage.clear();
 
//设置一个键值
localStorage.setItem(“fresh”,“vfresh.org”);
 
//获取一个键值
localStorage.getItem(“fresh”);  
 
//return “vfresh.org” //获取指定下标的键的名称(如同Array)
localStorage.key(0);  
 
//return “fresh” //删除一个键值
localStorage.removeItem(“fresh”);

关键词: html5,数据存储,storage   编辑时间: 2013-10-11 17:35:19

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐