原生js--客户端存储的种类
客户端存储遵循同源策略,不同的站点页面之间不可以相互读取对方的数据,但同一站点的不同页面之间可以共享存储的数据
客户端存储的种类:
1、web存储
localStorage、sessionStorage
2、cookie
3、userData(IE)
4、web数据库(尚未标准化)
索引数据库API(indexed Database API)
5、文件系统API
用于将文件通过XHR上传到服务器
主要看了localStorage和sessionStorage
区别:
1、存储的有效期。localStorage为永久存储,除非用户手动删除;sessionStorage为会话存储,页面关闭之后就消失。
2、作用域:localStorage限定在文件源的级别,只要是同源的页面,都可以共享数据;sessionStorage只能再窗口级别共享数据(窗口为顶级窗口,顶级窗口和子窗口之间可以共享sessionStorage的数据)。
API:
setItem(“x”, 1)// 设置
getItem(“x”)// 获取
remoItem(“x”)// 删除
clear()// 删除全部
key(i) // 获取第i个数据的key
存储事件:
使用localStorage存储数据时,在当前页面存储,会在其他同源页面中触发存储事件(只有存储数据真正发生变化时才会被触发)
注册存储事件可以使用addEventListener或attachEvent的方法(绝大多数浏览器还可以使用onstorage的方法,但firefox不支持)
事件对象:(IE8不支持)
key // 被设置或移除的项的键,如果是调用的clear,则该值为null
newValue // 保存该项的新值,如果是删除,则该值为null
oldValue // 改变之前的值,如果是新项,则该值为null
storageArea // localStorage、sessionStorage等
url // 触发该存储事件的文档url
原生js--客户端存储的种类的更多相关文章
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- JavaScript的客户端存储
一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...
- js023-离线应用与客户端存储
js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...
随机推荐
- 创建自己的PKI公/私密钥对和公钥证书
1. 创建certificate request configuration file cert_req.conf******************************************* ...
- ym——Android开发MVP模式(攻克了View和Model的耦合)
转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 什么是MVP呢?它又和我们经常听到的MVC有什么关系了以及差别呢? MVP 是从经典的 ...
- linux mount 挂接新硬盘
1.先用fdisk -l查看一下,先加入的外设地址名称 2. #fdisk /dev/sdb进入fdisk模式:Command (m for help):p //查看新硬盘的分区Command ( ...
- [转]CentOS虚拟机如何设置共享文件夹,并在Windows下映射网络驱动器?
CentOS虚拟机如何设置共享文件夹,并在Windows下映射网络驱动器? 转自这里 一.为什么要这么做? 最近在做Linux下的软件开发,但又想使用Windows下的编程工具“Source Insi ...
- 解决错误:“废弃 document 元素之后的内容”——HTML5新特性,局部样式表
最近正在学习angularjs,不过本文和angularjs没多大关系.在学习使用route和ng-view使用模版之后,发现view装载之后,firefox都会报个错误“废弃 document 元素 ...
- UNIX环境编程学习笔记(28)——多线程编程(三):线程的取消
lienhua342014-11-24 1 取消线程 pthread 提供了pthread_cancel 函数用于请求取消同一进程中的其他线程. #include <pthread.h> ...
- angular.extend深拷贝(deep copy)
在用到angular.extend的时候,正好碰到一个对象,是层层嵌套的Array, 结果发现只能extend第一层,查阅官文档,确实不支持deep copy: Note: Keep in mind ...
- appium的xpath定位问题及常用方法
关于类似的帖子好像很多,但是没有找到具体能帮我解决问题的办法.还是自己深究了好久才基本知道app上面的xpath定位和web上的不同点: 先放一个图: A,先说说不用xpath的场景,一般是用于存在i ...
- The difference between the request time and the current time is too large.阿里云oss上传图片报错
The difference between the request time and the current time is too large. 阿里云oss上传图片的时候报错如上, 解决办法,把 ...
- js准确获取当前页面url网址信息
这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法.split拆分法等,需要的朋友可以参考下 在WEB开发中,时常会用到javascript来获取当前页面的url网址 ...