js系列教程12-浏览器存储全解
全栈工程师开发手册 (作者:栾鹏)
快捷链接:
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
js系列教程13-原型、原型链、作用链、闭包全解
客户端存储全解
js中包含sessionStorage和localStorage以及cookie三种浏览器端的数据存储方式。
sessionStorage 、localStorage 和 cookie 之间的共同点:
都是保存在浏览器端,且同源的。
sessionStorage 、localStorage 和 cookie 之间的区别:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有网址路径(path)的概念,可以限制cookie只属于某个网址路径下。
存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
Web Storage (localStorage、sessionStorage 继承自Web Storage)支持事件通知机制,可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
检测当前是否联网
if(navigator.onLine) //也可以通过window事件online和offline设置离线或在线。chrome11以及之前的版本始终为trueconsole.log("当前处于在线状态");
else console.log("当前处于离线状态");
cookie
HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内,当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话,必须引入一种机制。
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。
Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
//cookie集成自定义类。包含了cookie添加,读取,删除
var CookieUtil = {get:function(name){var cookiename = encodeURIComponent(name)+"=";var cookiestart = document.cookie.indexOf(cookiename),cookievalue = null;if(cookiestart>-1){var cookieend = document.cookie.indexOf(";",cookiestart);if(cookieend==-1) cookieend = document.cookie.length;cookievalue = decodeURIComponent(document.cookie.substring(cookiestart+cookiename.length,cookieend));}return cookievalue;},set:function(name,value,expires,path,domain,sexure){var cookietext = encodeURIComponent(name)+"="+encodeURIComponent(value);if(expires instanceof Date) cookietext+="; expires="+expires.toGMTString();if(path) cookietext+="; path="+path;if(domain) cookietext+="; domain="+domain;if(sexure) cookietext+="; secure";document.cookie = cookietext;},unset:function(name,path,domain,secure){this.set(name,"",new Date(0),path,domain,secure);}
};//应用
CookieUtil.set("name","luanpeng","/books/projs/","www.example.com",new Date("January 1,2020"));//添加cookie
CookieUtil.get("name");//读取cookie
CookieUtil.unset("name","/books/projs/","www.example.com"); //删除cookie
sessionstorage
sessionStorage.setItem("name","luanpeng"); //添加存储key-value
sessionStorage.age = 12; //设置数据
for(var key in sessionStorage) //遍历数据console.log(sessionStorage.getItem(key)); //getItem读取属性值
delete sessionStorage.name; //删除数据
sessionStorage.removeItem("age"); //删除数据
localstorage
localstorage同一个对象访问必须域名相同。数据保留至用户删除或清除缓存
localStorage.setItem("name","luanpeng"); //添加设置属性
localStorage.age = 12; //添加设置
console.log(localStorage.getItem("age")); //读取
console.log(localStorage.name); //读取
js系列教程12-浏览器存储全解相关推荐
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程9-表单元素全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- python数据挖掘系列教程——PySpider框架应用全解
全栈工程师开发手册 (作者:栾鹏) python教程全解 python数据挖掘系列教程--PySpider框架应用全解. PySpider介绍 pyspider上手更简单,操作更加简便,因为它增加了 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程5-动画操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- python网络爬虫系列教程——PhantomJS包应用全解
全栈工程师开发手册 (作者:栾鹏) python教程全解 如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没天理了.所以,我们需要有一些好用 ...
最新文章
- Windows 10 编程遥控 Ardunio
- PHP内核介绍及扩展开发指南—Extensions 的编写
- 从零开始做一个SLG游戏(三):用unity绘制图形
- java 原子类能做什么_死磕 java原子类之终结篇(面试题)
- 第二部分Calendar原理和思想
- [转载] Python str方法
- Cartographer ROS for Turtlebots 初探
- Flutter实战视频-移动电商-18.首页_火爆专区后台接口调试
- HTML实现复制功能
- 2021年下半年软考真题软件设计师真题答案(上午题)
- PS改变证件照片背景颜色
- C++面向对象小练习:几何图形类
- 也许你看了一本假的天龙八部
- for循环的经典例题
- linux usb挂载日志,linux系统usb挂载
- 利用R语言实现反正弦转换(arcsine-transformed)
- 手机怎样识别图片中的文字?
- 网卡MAC地址(物理地址)映射为IPv6接口标识符
- contiki学习笔记(二)CTK图形界面
- php新浪微博 登录接口文档,最新新浪微博网站接入API接口的具体步骤wordpress
热门文章
- python爬虫爬取多个页面_Python爬虫笔记:爬取单个页面
- 【王道计组笔记】总线(2):性能指标分析
- 为什么t6显示登录不到服务器,t6客户端登录不到服务器
- po 价格条件表_海纳易拓图文讲解SAP MM模块采购价格条件
- Ubuntu 18.04 软件源修改成国内源
- unity3d php js,【Unity开发】unity3d中的http通信?post/get
- 【CCCC】L2-009 抢红包 (25分),,间接排序,比较double大小
- JavaScript的for of语法遍历数组元素
- Python入门-try-except
- CodeForces - 946C String Transformation