20190405-cookie与localstorage
-
cookie与localstorage
-
webstorage
-
webstorage
-
sessionstorage
-
为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
-
临时存储 当浏览器关闭的时候就自动清空(页面结束)
-
只有同一个会话中的页面才能访问这些数据
-
特点
- 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
- 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
- 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
- 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
- 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
-
业务场景
- sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。
-
-
loacalstoage
-
在浏览器关闭，然后重新打开后数据仍然存在。
-
可以设置失效时间
-
function set(key,value){ var curTime = new Date().getTime(); localStorage.setItem(key,JSON.stringify({data:value,time:curTime})); } function get(key,exp){ var data = localStorage.getItem(key); var dataObj = JSON.parse(data); if (new Date().getTime() - dataObj.time>exp) { console.log('信息已过期'); //alert("信息已过期") }else{ //console.log("data="+dataObj.data); //console.log(JSON.parse(dataObj.data)); var dataObjDatatoJson = JSON.parse(dataObj.data) return dataObjDatatoJson; } }
-
function getLocalStorage(key) { var exp = 60 * 60 * 24; // 一天的秒数 if(localStorage.getItem(key)) { var vals = localStorage.getItem(key); // 获取本地存储的值 var dataObj = JSON.parse(vals); // 将字符串转换成JSON对象 // 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间 var isTimed = (new Date().getTime() - dataObj.timer) > exp; if(isTimed) { console.log("存储已过期"); localStorage.removeItem(key); return null; } else { var newValue = dataObj.val; } return newValue; } else { return null; } }
-
永久存储 只要不清空浏览器记录和手动删除存储记录 存储是一只存在的
-
任何窗口的任何页面都可以访问这些数据,但遵循同源策略,不同网站是不能共用的
-
-
-
-
}
-
存储的是json字符串,只能是字符串
-
setItem
-
用JSOn.stringify()
- window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) )
-
-
getitem
-
用JSON.parse
- JSON.parse( window.localStorage.getItem( 'PersonInfo' ))
-
-
改变localstorage的值就是重新写入
-
removeItem (key)
- 删除指定 key 的本地存储值
-
clear()
- 删除本地存储的全部数据
-
storage.key(i)
- 使用key()方法,向其去除索引对应的键
-
valueOf
- localStorage.valueOf() //读取存储在localStorage上的所有数据
-
.hasOwnProperty
- localStorage.hasOwnProperty('name') // true
-
toLocaleString
- localStorage.arr.toLocaleString(); // "aa,bb,cc"
-
length
- .length ：返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。
-
.key(int index) ：返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
-
-
存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
-
应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
-
存储空间大,默认5Mb
-
存储在客户端,可以直接获取
-
直接在windows上调用
-
localStorage会可以将第一次请求的数据直接存储到本地,相当于一个更优良的带宽
-
数据存储在客户端，可以直接获取，不会发送到服务器，既节省网络资源，又安全可靠；
-
提供了操作数据的API，开发人员只需调用接口即可操作数据，简单易用。
-
url传参也有长度限制
-
1 缓存数据
-
2 减少对内存的占用
-
-
storage 事件
-
用来监控storage的改变
-
，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage
-
-
隐私模式下,localstorga没用了
-
劣势
-
只能是string对象,所以每次都需要转化对象
-
localStorage在浏览器的隐私模式下面是不可读取的
-
本质上是存取字符串，存储内容太多消耗空间，页面变卡。
-
对字符串的读取,消耗内存
-
localstorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
-
无法北爬虫抓取到
-
-
需求
-
缓存一般信息，如搜索页的出发城市，达到城市，非实时定位信息
-
② 缓存城市列表数据，这个数据往往比较大
-
③ 每条缓存信息需要可追踪，比如服务器通知城市数据更新，这个时候在最近一次访问的时候要自动设置过期
-
④ 每条信息具有过期日期状态，在过期外时间需要由服务器拉取数据
-
-
优点
-
（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
-
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
-
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
-
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
-
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
-
（6）WebStorage提供了一些方法，数据操作比cookie方便；
-
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
-
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
-
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
-
clear () —— 删除所有的数据
-
key (index) —— 获取某个索引的key
-
-
image.png
-
-
-
-
* localstorage与sessionsytorage
* localstorage
* 可以保存数据到本地
* 生命周期
* localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失
* 除非主动删除数据，否则数据永远不会消失
* 存储大小
* 5MB
* 保存位置
* 都保存在客户端，不与服务器进行交互通信
* 存储内容对象
* 只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
* 获取方式
* window.localStorage
* getitems
* 应用场景
* 适合长期保存在本地的数据
* sessionsytorage
* 生命周期
* 仅在当前会话下有效
* 同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在
* 存储大小
* 5MB
* 保存位置
* 都保存在客户端，不与服务器进行交互通信
* 存储内容对象
* 只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
* 获取方式
* window.sessionStorage
* 应用场景
* 敏感账号一次性登录
* 优点
* 存储空间更大
* 节省网络流量
* 快速显示,不需要经过服务器
* 安全性更高,不需要担心被截取
* 操纵方法
* setItem (key, value) —— 保存数据，以键值对的方式储存信息。
* getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
* removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
* clear () —— 删除所有的数据
* key (index) —— 获取某个索引的key
* cookie
* 缺点
* cookie的大小是受限制的，一个cookie只能设置4KB的数据。并且大多数浏览器只允许每个站点存储20个Cookie；
* cookie保存的数据，无论服务器端是否需要，每次请求都会被发送到服务器端，白白耗费网络资源。并且，数据一般是非加密传输，存在安全隐患；
* cookie缺少操作数据的API，需要开发者自己封装接口，使用起来极不方便。
* cookie大小限制在4k左右，不适合存业务数据
* cookie每次随HTTP事务一起发送，浪费带宽
* Cookie从你设置的时候，就会给个时间，不设置默认会话结束就过期；
* Cookie 的本职工作并非本地存储，而是“维持状态”。因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存
* 操作cookie
* 1、引入jquery.cookie.js
* <script type="text/javascript" src="js/jquery.min.js"></script>
* <script type="text/javascript" src="js/jquery.cookie.js"></script>
* 2、设置 "会话"cookie
* $.cookie('username', 'xy');
* cookie有效期默认到用户关闭浏览器
* 3、设置有效时间
* $.cookie('username', 'xy', { expires: 7 });
* 4、设置有效路径
* $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 如果在整个网站中访问这个cookie需要这样设置有效路径：path: '/'
* 5、读取cookie
* $.cookie('username')
* 注：cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。
* 6、删除cookie
* $.cookie('username', null); //通过传递null作为cookie的值即可
* 7、可选参数
* domain:'[jquery.com](http://jquery.com/)', // （String）创建该Cookie的页面域名；
* secure:true // （Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；
* })
* $.cookie('the_cookie','the_value',{
* expires:7, //（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
* path:'/', // （String）创建该Cookie的页面路径；
* 保存在服务器端
* 机制
* 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
* Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
* cookie只能保存字符串类型，以文本的方式
* 应用场景
* ）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
* （2）保存上次登录的时间等信息。
* （3）保存上次查看的页面
* （4）浏览计数
* * 
* seesion
* cookie和session都是用来跟踪浏览器用户身份的会话方式。
* 保存在浏览器端
* 当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。
* seesion可以保存对象
* session的安全性大于cookie。
* 1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；
* （2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；
* （3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。
* （4）sessionID是加密的
* （5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。
网友评论