(精华)2020年8月17日 浏览器本地存储

浏览器存储

Cookie, SessionStorage, LocalStorage这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对！
(另外还有一种存储模式叫：session;这种级别的存储属于服务端会话级别的存储,后期Node课程中会讲)

  

 

  
1
  
2
 

cookie

cookie 是什么?
	cookie翻译过来是小甜饼的意思，是网景公司的前雇员 Lou Montulli 在1993年3月的发明的。
	cookie是纯文本格式，不包含任何可执行的代码信息，伴随着用户请求在 Web 服务器和浏览器之间传递。
	cookie本质上属于http的范畴，因为http协议本身是无状态的，服务端是没有办法区分请求来自于哪个
				客户端，即便是来自于同一个客户端的多次请求 我们的服务端也是没有能力来区分的。
				就是因为http协议是无状态的，所以才需要cookie去维持客户端的状态。

cookie的生成方式:
	1.客户端生成:
		    在 JavaScript 中通过 document.cookie 属性，你可以创建、维护和删除 cookie
			设置 document.cookie 属性的值并不会删除存储在页面中的所有 cookie。它只简单的创建或修改字符串中指定的 cookie
			要使用 JavaScript 提取 cookie 的值，只需要从 document.cookie 中读取即可
    2.服务端生成:
			Web 服务器通过发送一个称为 Set-Cookie 的 HTTP消息头来创建一个 cookie
    HttpOnly
        为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问有HttpOnly 标记的Cookie，
	
cookie的缺点
	安全性  ：由于cookie在HTTP中是明文传递的，其中包含的数据都可以被他人访问，可能会被篡改、盗用。
	大小限制： cookie的大小限制在4KB左右，若要做大量存储显然不是理想的选择。
	增加流量： cookie每次请求都会被自动添加到Request Header中，无形中增加了流量。
					 cookie信息越大，对服务器请求的时间也越长。因此要慎用cookie，不要在cookie中存储重要和敏感的数据。

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

Web Storage

SessionStorage和LocalStorage都是本地存储,同时空间比Cookie大很多，一般支持5-10M
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

var data = xxxxxStorage.getItem('person');
	该方法接受一个键名作为参数，返回键名对应的值。
xxxxxStorage.setItem('key', 'value');
	该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
xxxxxStorage.removeItem('key');
	该方法接受一个键名作为参数，并把该键名从存储中删除。
xxxxxStorage.clear()
	调用该方法会清空存储中的所有键名

storage事件：	
	Storage 对象发生变化时（即创建/更新/删除数据项时，Storage.clear() 方法至多触发一次该事件）会触发
	在同一个页面内发生的改变不会起作用
	在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)
		key 	    :  修改或删除的key值，如果调用clear(),为null
		newValue    :  新设置的值，如果调用clear(),为null
		oldValue    :  调用改变前的value值,如果调用clear(),为null
		url         :  触发该脚本变化的文档的url
		storageArea :  当前的storage对象

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

备注：

1.静态资源是不会携带cookie的
2.cookie一般都是后台种的，很少让前端来直接写
3.cookie分:持久级别、session级别
4.cookie一般用于和session通信

  

 

  
1
  
2
  
3
  
4
 

浏览器储存量的支持

http://dev-test.nemikor.com/web-storage/support-test/

  

 

  
1
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/108065141