HTML 5 Web 存储

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

  • localStorage - 没有时间限制的数据存储
  • <!DOCTYPE html>
    <html>
    <body> <div id="result"></div> <script>
    // Check browser support
    if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    } else {
    document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
    }
    </script> </body>
    </html>

    Storage.setItem()

    setItem() 作为 Storage 接口的方法,接受一个键名和值作为参数,将会把键名添加到存储中,如果键名已存在,则更新其对应的值。

    语法

    storage.setItem(keyName, keyValue);

    参数

    keyName
    一个 DOMString,要创建或更新的键名。
    keyValue
    一个 DOMString,要创建或更新的键名对应的值。

    返回值 无

  • sessionStorage -

    sessionStorage 方法

    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

    如何创建并访问一个 sessionStorage:

  • <body>
    <div id="result"></div>
    <script>
    if (typeof(Storage)!=="undefined") {
    sessionStorage.setItem("lastname","Gates");
    document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
    }else{
    document.getElementById("result").innerHTML = "抱歉你所找的內容本瀏覽器暫時不支持";
    }
    if(sessionStorage.pagecount){
    sessionStorage.pagecount = Number(sessionStorage.pagecount)+1;
    }else{
    sessionStorage.pagecount = 1;
    }
    document.write("visits的次數為"+sessionStorage.pagecount+"次")
    </script>
    </body>

cookie和webstorage的更多相关文章

  1. JavaScript高级编程———数据存储(cookie、WebStorage)

    JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...

  2. cookie,webstorage的理解

    在前两天的开发时,遇到一个问题,需要将一个网页在预加载时,优先出一个弹出框,但是再次加载时不希望它出现,在经过一段时间的搜索和尝试之后,发现了大多使用的两种方式:生成cookie和webStorage ...

  3. 一文梳理Web存储,从cookie,WebStorage到IndexedDB

    前言 HTTP是无状态的协议,网络早期最大的问题之一是如何管理状态.服务器无法知道两个请求是否来自同一个浏览器.cookie应运而生,开始出现在各大网站,然而随着前端应用复杂度的提高,Cookie 也 ...

  4. 兼容cookie和webStorage

    html页面     <!DOCTYPE html> <html lang="en"> <head>     <meta charset= ...

  5. cookie与webStorage区别

  6. WebStorage记录滚动条位置

    因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...

  7. 一文带你看懂cookie,面试前端不用愁

    本文由云+社区发表 在前端面试中,有一个必问的问题:请你谈谈cookie和localStorage有什么区别啊? localStorage是H5中的一种浏览器本地存储方式,而实际上,cookie本身并 ...

  8. 什么是cookie(前段时间看到别人简历上把cookie和localStorage混淆了所以专门又去了解了下)

    在前端面试中,有一个必问的问题:请你谈谈cookie和localStorage有什么区别啊? localStorage是H5中的一种浏览器本地存储方式,而实际上,cookie本身并不是用来做服务器存储 ...

  9. 浅谈cookie,sessionStorage和localStorage区别

    在客户端存储数据可以使用的技术有如下四种: Cookie技术:浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好 H5 WebStorage:不能超过8MB,操作简单: ...

随机推荐

  1. ansible-doc到底有多好用,助你玩转各种模块

    #使用ansible-doc:查看各种模块的帮助 #命令格式: ansible-doc -l #列出所有的模块列表 ansible-doc -s 模块名 #查看指定模块的参数 ansible-doc ...

  2. Oracle学习(十三)优化专题

    一.查询频繁,数据量大 索引 使用时机:表中经常查询的字段可以考虑添加索引. 联合索引:若能确认多个条件会同时使用时,可以将这几个条件作为联合索引. 单列索引:若条件查询时,这几个条件不是同时用到的话 ...

  3. Mac 环境下配置 MySQL 以及 Mac终端登录MySQL

    1.首先mysql官网下载Mac 版 mysql直接安装 2.打开偏好设置-> MySQL -> 查看是否开启mysql服务 3.打开终端 进入mysql目录: /usr/local/my ...

  4. tensorflow(一):基础

    一.张量 1.张量的概念 在TensorFlow中,所有的数据都通过张量的形式来表示.从功能的角度,张量可以简单理解为多维数组,零阶张量表示标量(scalar),也就是一个数:一阶张量为向量(vect ...

  5. Allegro PCB 转 PADS Layout

    操作系统:Windows 10 x64 工具1:Allegro PCB Design XL (legacy) version 16.6-2015 工具2:PADS Layout VX.2.3 参考1: ...

  6. 【题解】PTA-Little Bird

    Link 单调队列板子. 题目大意:一个点可以由距离它不超过\(k\)的点跳过来,如果那个点比它高就不需要花费体力,否则花费\(1\)的体力.问走到\(n\)的最小体力,多组询问. 显然的转移方程,设 ...

  7. 初学者的Android移植:在Debian上建立一个稳定的构建环境

    介绍 通过在chrooted环境中设置开发环境,避免依赖冲突和沙箱您的Android开发从您的Debian GNU/Linux系统.这是为通配符类别准备的,因为从源代码构建Android似乎没有在其他 ...

  8. 这就是小学生也会用的四则计算练习APP吗?- by软工结对编程项目作业

    结对编程项目 软件工程 这就是链接 作业要求 这就是链接 作业目标 熟悉在未结对情况下如何结对开发项目 Github与合作者 合作者(学号): 区德明:318005422 虚左以待 Github链接: ...

  9. Python+Appium自动化测试(13)-toast定位

    一,前言 在app自动化测试的过程中经常会遇到需要对toast进行定位,最常见的就是定位toast或者获取toast的文案进行断言,如下图,通过定位"登录成功"的toast就可以断 ...

  10. 网站搭建-云服务器ECS的使用

    1. 查看购买的云服务器实例,重置密码 2. 查找IP进行查看,此时网页时不存在的,开始配置: 3. 登录putty或其他终端,进行网页搭建,先按教程走一遍,然后再做个性化处理: #安装Apache ...