localStorage sessionStorage 和cookie等前端存储方式总结
localStorage sessionStorage 和cookie
localStorage
localStorage是本地存储的,除非清空本地数据
localStorage不会自动把数据发给服务器,仅在本地保存。
localStorage只能存字符串,任何类型存储的时候都会被自动转换成字符串
使用方式(localStorage是window的属性)
设置localStorage键值对
localStorage.name = 'zhangsan';//存储一个键值对
localStorage.name = 'lisi';//name新值会覆盖旧值
localStorage['年龄'] = 23;//key是中文就使用这种方式
localStorage['404'] = '你迷路了';//key是数字就用这种方式
localStorage.setItem('email','chentging@aliyun.com');//使用setItem函数创建一个键值对
根据localStorge键取用值
console.log(localStorage.name);
console.log(localStorage['年龄']);
console.log(localStorage['404']);
console.log(localStorage.getItem('name'));
//通过key()函数获取键值对中的key
console.log(localStorage.key(index));清除localStorage
//清除特定的键值对
console.log(localStorage.removeItem('name'));//清除name的值
//清除所有键值对
localStorage.clear();
sessionStorage
sessionStorage只伴随着session,窗口一旦关闭就没了
sessionStorage不会自动把数据发给服务器,仅在本地保存。
sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面
localStorage只能存字符串,任何类型存储的时候都会被自动转换成字符串
使用方式(localStorage是window的属性)
设置,取值,清除都和localStorage完全一样
Web SQL Database
简介
Web SQL DatabaseAPI实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API,这些API有同步的,也有异步的,同步版本的API只在工作线程(Worker Threads)上有用,由于并不是所有的浏览器都支持工作线程,一般情况下,都会使用异步API。它的核心方法有三个:openDatabase,transaction和executeSql。这些API已经被广泛的实现在了不同的浏览器里,尤其是手机端浏览器。虽然W3C官方在2011年11月声明已经不再维护Web SQL Database规范,但由于其广泛的实现程度,了解这些API对 Web开发还是非常有必要的
- Web SQL Database核心方法介绍
openDatabase()方法打开一个已经存在的数据库连接,如果数据库不存在,则创建一个新的数数据库
var db = openDatabase('mydb','1.0','my database',1024*1024);
4个参数的意义(数据库名、版本号、数据库说明、数据库大小单位byte(数据库大小可变)、创建回滚)
注意:如果数据库已经创建,第五个参数将会进行回滚操作。如果省略此参数,仍能创建
- 用database.transaction()方法执行SQL语句,该函数只有一个参数是负责执行查询的函数
- 查询函数有一个事务类型的参数tx
- 事务参数tx具有一个函数:executeSql(),这个函数有4个参数
- 表示查询的SQL字符串
- 插入到查询SQL字符串中问号所在处的字符串参数
- 查询执行成功时执行的函数
- 查询失败时执行的函数
- 执行成功的函数有两个参数:tt,事务性参数;result,执行的返回结果
执行错误的函数也有两个:tt,事务性参数,error,错误的对象
实例:var db = openDatabase('mydb','1.0','my database',1024*1024);if (db) {} //可以判断是否成功连接上数据库db.transaction(function(tx) {//创建一个表tx.executeSql('create table if not exists accountTab(name TEXT,age INTEGER,email TEXT)',[],function() {},function(tx,error) {console.log(error.source + ':' +error.message);//遇到错误打印出错误信息});//插入数据tx.executeSql('insert into accountTab values(?,?,?)',['zhangsan',23,'chentging@aliyun.com']);//查询数据tx.executeSql('select * from accountTab',[],function(tt,rs) {//循环结果集for(var i = 0; i < rs.rows.length;i++) {console.log(rs.rows);//输出结果集}});});
cookie
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递
- cookie数据还要路径(path)的概念,可以限制cookie只属于某个路径下
- 存储大小有限制,cookie数据不能超过4K,因为每次http请求都会携带cookie,所以cookie适合保存很小的数据
- sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
cookie的应用
- 保存用户登录状态:例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失
- 定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。
- 创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样,在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品,方便随时进行比较
cookie localStorage sessionStorage比较
- 传递方式
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递
- sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
- 数据大小
cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据
- sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
- 数据有效期
- sessionStorage:仅在浏览器窗口(或者标签页)关闭前有效(即:窗口关闭之前满足同源策略下都有效果)
- 所以你刷新这个页面前进后退(前进后退得保证同源策略)
localStorage:始终有效,窗口或标签页关闭也一直保存(除非主动删除数据),因此用作持久数据
- cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
- sessionStorage:仅在浏览器窗口(或者标签页)关闭前有效(即:窗口关闭之前满足同源策略下都有效果)
- 作用域不同
sessionStorage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的(就是,你再打开一个标签页,同样的地址,也不会共享)
localStorage 在所有同源页面中都是共享的(前提是相同浏览器,别一个是谷歌浏览器,一个火狐浏览器,然后打开同一个页面说不是共享的哈哈)也就是能跨页不能跨域
- cookie也是在所有同源窗口中都是共享的
cookie的封装,我推荐大家使用cookie相关的插件(当然有时间也可以自己封装,网上也很多)
http://www.cnblogs.com/jicheng/p/5946460.html
http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html
http://blog.csdn.net/canglingyue/article/details/52386196
web本地存储事件监听
当程序修改localStorage与sessionStorage时将触发全局事件。
当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,就会触发storage事件,如果需要进行监听数据处理,通过以下方法:
window.addEventListener(event,handleEvent, capture)
event:设置成storage
handleEvent:事件处理函数
capture:事件处理顺序,一般设置成false,表示采用冒泡方式处理
handleEvent处理事件的函数会接收到一个StorageEvent对象,该对象有以下属性:
key:被修改的键。
oldValue:修改前的值(如果是增加新的键值,则该属性为null)
newValue:修改后的值(如果是删除键值,则该属性为null)
url/uri:触发当前存储事件的页面的url
注意:storage改变的时候,触发这个事件会调用所有同域下其他窗口的storage事件,不过它本身触发storage即当前窗口是不会触发这个事件的(当然ie这个特例除外,它包含自己本事也会触发storage事件)
转载于:https://www.cnblogs.com/chentging/p/7340672.html
localStorage sessionStorage 和cookie等前端存储方式总结相关推荐
- html5 localstorage 生命周期,cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式...
写在前面: 前端开发的供个到效近一项消果近一项消果近一项消果近时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstor ...
- 浏览器的存储方式——cookie,localStorage,sessionStorage
文章目录 一.cookies 二.sessionStorage.localStorage 总结 一.cookies 一.概念 cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技 ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- JS cookie与web存储(localStorage与sessionStorage)
cookie <script>document.cookie = 'a=1'console.log(document.cookie) // style=null; a=1 </scr ...
- 本地存储-cookie|localStorage|sessionStorage|indexedDB
本地存储 本地存储 cookie 如何工作 问题 cookie标准限制 属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...
- js cookie 存储checkbox_浏览器数据存储方式总结,网友:“精辟”!
今天主要来讲下前端的数据存储,说起数据存储,大家肯定第一时间想起cookie,localstorage,sessionstorage,而其实还有userData和IndexedDB这两种数据存储,接下 ...
- 前端百题斩【024】——我从浏览器控制台看到了五种存储方式
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第24斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 打开浏览器 ...
- 浅谈localStorage、sessionStorage 与cookie
由于工作的需要,今天使用了下localStorage.sessionStorage和cookie,感觉这玩意儿还挺好用的. 关于localStorage与sessionStorage的知识点以及用法之 ...
- 几种前端数据存储方式(记录)
1. cookie cookie生成cookie是存在客户端,session存在服务器端.在cookie当用户第一次访问网页时,服务器会给客户端返回一个cookie,在cookie中保存着服务器端se ...
最新文章
- IOS10 APP安装后打开不提示是否允许使用数据
- MSM8994 thermal管理
- 程序员法律考试(3)-依法治国的基本原则和法制体系具体任务
- VTK:IO之ReadPlainTextTriangles
- 【转】EntityFramework使用Code First模式创建数据库控制生成单数形式的表名
- ubuntu16.04下出现登陆不进去
- asp.net gridview 无法更新数据
- 新型恶意软件—— Grizzly攻击Telegram
- 银行的压力测试如何进行?
- linux安全-用户行为监控
- 【必看】分辨外部、内部和贯穿型气孔
- android actionBar searchview 默认展开,并且放大镜图标在编辑框内。
- windows网络编程 --网络聊天室(2)
- Keil软件介绍与烧录工具的使用
- 电脑使用技巧(office 套件英文版切换为中文)
- 用 visual foxpro 也可以编写“迅雷下载”
- 百果园“两驾马车、三根支柱”商业模式大揭秘
- Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
- 如何扛住100亿次请求?后端架构应该这样设计!
- 细数最近三年我的租房经历
热门文章
- oracle常见等待事件,必看干货 | Oracle 常见的等待事件说明(下)
- mysql join子查询_MySQL的多表join中,子查询伤不起啊!
- excel制作窗体查询界面_利用 VBA窗体制作excel登录界面
- python中定义元组的符号_python中得元组和字符串详解,有这么一篇文章就够了
- SQLSERVER中RANK OVER(PARTITION BY)的用法
- SQLSERVER对数据表进行分区
- 从 0 到 1 实现 React 系列 —— 组件和 state|props
- vsftpd 本地用户登录和上传设置
- 编译AVX代码,升级Redhat 5.5 GCC至4.7.1
- Linux下的硬件驱动——USB设备(下)