学习笔记:Web Storage API
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的更多相关文章
- golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息
golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...
- web API简介(三):客户端储存之Web Storage API
概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...
- Web Storage API:localStorage 和 SessionStorage
Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. 参考:https://developer.mozilla.org/zh-CN/ ...
- Web Storage API的介绍和使用
目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key value存 ...
- ZooKeeper学习笔记二:API基本使用
Grey ZooKeeper学习笔记二:API基本使用 准备工作 搭建一个zk集群,参考ZooKeeper学习笔记一:集群搭建. 确保项目可以访问集群的每个节点 新建一个基于jdk1.8的maven项 ...
- Web Storage API : LocalStroage
这是一篇详细介绍详细介绍详细介绍_(:з」∠)_ 背景: 当你访问一个页面,并不是丢到服务器,等待用户访问就可以了的.从输入网址到显示网页的全过程,可以参考这里 简单来说,在输入url按下回车键后,首 ...
- Flink学习笔记:Flink API 通用基本概念
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- flink学习笔记:DataSream API
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- HTML5学习笔记 Web存储
HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...
随机推荐
- fabric自动化安装mysql-server
1.创建文件auto_install_mysql.py vim auto_install_mysql.py --------------------------------------------&g ...
- Learning Python 001 第一个程序
Python 第一个程序 我使用的开发工具是PyCharm软件.我们使用的是Python3.5 for windows . 如果你还没有安装PyCharm软件 和 Python3.5,请到这里来看如果 ...
- 13. CTF综合靶机渗透(六)
靶机说明 Breach1.0是一个难度为初级到中级的BooT2Root/CTF挑战. VM虚机配置有静态IP地址(192.168.110.140),需要将虚拟机网卡设置为host-only方式组网,并 ...
- jeecms 评论相关
html WEB-INF-t-cms-www-gyxrmyy-content news.html 内容详情页 inc_comment_input.html 评论输入框 inc_comment_list ...
- html css将图片或div置于顶层
在做这个功能时,图片被挡住了.. 解决办法 在这个图片的css里加上z-index:数字:(数字可以为正也可以为负数) z-index:1肯定在z-index:-1的上面 用这个属性来给div分层 是 ...
- python 学习笔记12(事件驱动、IO多路复用、异步IO)
阻塞IO和非阻塞IO.同步IO和异步IO的区别 讨论背景:Linux环境下的network IO. 1.先决条件(几个重要概念) 1.1.用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对32 ...
- PAT天梯赛L2-025 分而治之
题目链接:点击打开链接 分而治之,各个击破是兵家常用的策略之一.在战争中,我们希望首先攻下敌方的部分城市,使其剩余的城市变成孤立无援,然后再分头各个击破.为此参谋部提供了若干打击方案.本题就请你编写程 ...
- jmeter读取本地CSV文件
用jmeter录制考试上传成绩等脚本时,出现的问题及解决方法如下: 1.beanshell前置处理器,不能读取本地csv文件里的数据: 方法一: 在beanshell里不能直接从本地的csv文件里读取 ...
- rem字体在rem盒子里面不一样,或者不同的行解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 8、kvm虚拟机添加硬盘
kvm虚拟机添加硬盘qemu-img创建一块新的硬盘 qemu-img create -f qcow2 /kvm-data/kvm/jumperhost_disk1.qcow2 50G 关闭虚拟机 v ...