Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。

Web Storage 包含如下两种机制:

  • sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
  • localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。

localStorage和sessionStorage是相似的,除了存在前者的数据没有到期时间而存在后者的数据会被清除当浏览器关闭。例子:添加或更新数据项:localStorage.setItem('myCat','Tom');,读数据项:var cat = localStorage.getItem('myCat');,移除数据项:localStorage.removeItem('myCat');或localStorage.clear();,后者不接受参数,只是简单地清空域名对应的整个存储对象。

IE和Edge不支持在本地HTML文件上用localStorage,火狐可以。

localstorage中只能存储字符串。如果想存对象数组/对象/数组,则存之前要把数据变成JON,读时再把数据从JSON变回来。队JSON用typeof的结果是字符串。

真正项目中,大部分是通过Ajax和Server通过接口来实现对于数据的写操作,可以通过自己写一个简单的服务代码来学习前后端数据通信的主要方式Ajax。

学习笔记:Web Storage API的更多相关文章

  1. golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息

    golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...

  2. web API简介(三):客户端储存之Web Storage API

    概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...

  3. Web Storage API:localStorage 和 SessionStorage

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. 参考:https://developer.mozilla.org/zh-CN/ ...

  4. Web Storage API的介绍和使用

    目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key value存 ...

  5. ZooKeeper学习笔记二:API基本使用

    Grey ZooKeeper学习笔记二:API基本使用 准备工作 搭建一个zk集群,参考ZooKeeper学习笔记一:集群搭建. 确保项目可以访问集群的每个节点 新建一个基于jdk1.8的maven项 ...

  6. Web Storage API : LocalStroage

    这是一篇详细介绍详细介绍详细介绍_(:з」∠)_ 背景: 当你访问一个页面,并不是丢到服务器,等待用户访问就可以了的.从输入网址到显示网页的全过程,可以参考这里 简单来说,在输入url按下回车键后,首 ...

  7. Flink学习笔记:Flink API 通用基本概念

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  8. flink学习笔记:DataSream API

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  9. HTML5学习笔记 Web存储

    HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...

随机推荐

  1. [hdu3549]Flow Problem(最大流模板题)

    解题关键:使用的挑战程序设计竞赛上的模板,第一道网络流题目,效率比较低,且用不习惯的vector来建图. 看到网上其他人说此题有重边,需要注意下,此问题只在邻接矩阵建图时会出问题,邻接表不会存在的,也 ...

  2. 【总结整理】JavaScript的DOM事件学习(慕课网)

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

  3. maven 打JAR包资源文件指定路径与文件读取

    1.配置RESOURCES节点 有时会遇到maven打包后找不到资源文件了,其实这时候路径发生了变化,为了确保打包后路径不发生变化,指定一个固定的路径,请看下面配置 <build> ... ...

  4. 10. CTF综合靶机渗透(三)

    靶机说明 斗牛犬工业公司最近将其网站污损,并由恶意德国牧羊犬黑客团队拥有.这是否意味着有更多的漏洞可以利用?你为什么不知道?:) 这是标准的Boot-to-Root.你唯一的目标是进入根目录并看到祝贺 ...

  5. cogs 1685 魔法森林

    /* 写了个傻逼二分套二分,真的傻逼了,我这tmd是在贪心呐,70分满满的人品 */ #include<iostream> #include<cstdio> #include& ...

  6. Spring MVC 基于URL的映射规则(注解版)

    好几天没有跟进Spring MVC的学习了,之前看了点源码都忘的差不多了.这次就跟着之前的问题,继续总结下Spring MVC中的小知识. 关于SpringMVC的小demo可以参考这里! url-p ...

  7. springmvc json 简单例子

    1.控制器层: @RequestMapping("/json.do") @ResponseBody //将会把返回值 转换为json对象 public List<User&g ...

  8. SpringBoot整合MyBatis之xml配置

    现在业界比较流行的数据操作层框架 MyBatis,下面就讲解下 Springboot 如何整合 MyBatis,这里使用的是xml配置SQL而不是用注解.主要是 SQL 和业务代码应该隔离,方便和 D ...

  9. 转载 jQuery 整理的很详细,基本都在里面

    jQuery 函数     CSS 函数 $(a).css(name)     获取name属性值 $(a). css(name,value)      设置name的属性值 $(a).css({}) ...

  10. [SCOI2007]修车 费用流 BZOJ 1070

    题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使得顾客平均等待 ...