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. pytest自学第一期

    开始自学pytest了,我并不想看网上的各种自学教程和文档,要看咱们今天就看pytest的官方文档,不会英语咱们就用翻译,看不懂原理咱们就翻源码,就人肉试错 学习一个技术,使用速成鸡的套路是一个办法, ...

  2. [0CTF 2016]piapiapia(反序列逃逸)

    我尝试了几种payload,发现有两种情况. 第一种:Invalid user name 第二种:Invalid user name or password 第一步想到的是盲注或者报错,因为fuzz一 ...

  3. MATLAB中均值、方差、均方差的计算方法

    MATLAB中均值.方差.均方差的计算方法     1. 均值 数学定义: Matlab函数:mean >>X=[1,2,3] >>mean(X)=2 如果X是一个矩阵,则其均 ...

  4. 【Processing-日常1】小圆碰撞

    之前在CSDN上发表过: https://blog.csdn.net/fddxsyf123/article/details/79741637

  5. Spark 模型选择和调参

    Spark - ML Tuning 官方文档:https://spark.apache.org/docs/2.2.0/ml-tuning.html 这一章节主要讲述如何通过使用MLlib的工具来调试模 ...

  6. Python-如何拆分含有多种分隔符的字符串?

    案例: 把某个字符串依据分隔符拆分,该字符包含不同的多种分隔符,如下 s = '12;;7.osjd;.jshdjdknx+' 其中 ; . + 是分隔符 有哪些解决方案? 方法1:通过str.spl ...

  7. ES 入门 - 基于词项的查询

    准备 首先先声明下,我这里使用的 ES 版本 5.2.0. 为了便于理解,这里以如下 index 为格式,该格式是通过 PMACCT 抓取的 netflow 流量信息, 文中所涉及的到的例子,全基于此 ...

  8. 关于C++的右值引用的一些看法

    简介 关于C++中的右值引用的详细可以看这一批博文<从4行代码看右值引用>.那一篇博文详细结合四行简单的代码详细介绍了右值引用的使用方法和一些场景,非常实用. 而本篇博文主要介绍一下我在学 ...

  9. shell-的特殊变量-进程状态变量$$ $! $? $_详解

    一:shell的特殊变量-进程状态变量详解  1. 进程状态变量 $$ 获取当前shell的进程号(pid) $! 执行上一个指令的pid,上一个后台运行进程的进程号 $? 获取执行上一个指令的返回值 ...

  10. 左叶子之和(sum-of-left-leaves)

    LeetCode题目--左叶子之和(sum-of-left-leaves) 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 ...