web存储

为什么需要用到本地缓存

把部分不涉及用户安全的数据保存到本地,在页面刷新重新请求数据时就可以减轻服务器端的压力

本地缓存的方法

Cookie

工作原理

1.客户端第一次发送请求
2.服务器端接收响应,创建cookie,并把cookie发送给客户端
3.客户端发送请求时带上cookie
服务器读取请求头中的cookie并进行响应

属性

session

工作原理

1.客户端第一层发送请求,服务器端生成全局唯一标识符session_id,并在服务器内开辟session_id对应的数据存储空间
2.将session_id通过cookie发送给客户端
3.客户端访问服务器时通过cookie将session_id发送给服务器
4.服务器读取session_id将在服务器端的数据取出

如果客户端禁用cookie,可以使用url重写来进行会话跟踪

属性

cookie和session的区别

• 存储路径 : cookie保存在客户端,session保存在服务器端
• 存储空间 : 单个cookie保存的数据不能超过4k,session没有大小限制
• 安全性 : cookie不够安全,别人可以分析存放在本地的cookie并进行欺骗,考虑到安全性使用session
• 性能 : session在一定时间内保存在服务器中,当访问增多,会影响服务器的性能,考虑到服务器性能使用cookie
• session中保存的是对象,cookie中保存的字符串
• session不能区分路径,同一个用户在访问一个网站期间,路径不同也能访问同一个session;而cookie可以使用路径参数,在同一个网站下的不同路径cookie不能相互访问

webStorage

Storage API的属性和方法

Storage.length 只读
返回一个整数，表示存储在 Storage 对象中的数据项数量。
Storage.key()
该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。
Storage.getItem()
该方法接受一个键名作为参数，返回键名对应的值。
Storage.setItem()
该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem()
该方法接受一个键名作为参数，并把该键名从存储中删除。
Storage.clear()
调用该方法会清空存储中的所有键名。

cookie和webStorage的共同点和区别

相同点 : 都是保存在浏览器端,且同源的;都只能保存字符串形式的数据

不同点 :

• 生命周期 : cookie可通过maxAge自己设置存活时间;localStorage除非自己删除,否则一直存在;sessionStorage在页面或窗口关闭时消失
• 存储大小 : cookie不超过4k;localStorage和sessionStorage不超过5Mb
• 与服务端通信 : cookie会随着请求发送给服务器;而localStorage和sessionStorage不会

同源： 协议、域名/主机、端口相同

URL组成部分详解

URL是Uniform Resource Locator的简写，统一资源定位符。
一个URL由以下几部分组成：

scheme://host:port/path/?query-string=xxx#anchor

• scheme：代表的是访问的协议，一般为http或者https以及ftp等。
• host：主机名，域名，比如www.baidu.com。
• port：端口号。当你访问一个网站的时候，浏览器默认使用80端口。
• path：查找路径。比如：www.jianshu.com/trending/now，后面的trending/now就是path。
• query-string：查询字符串，比如：www.baidu.com/s?wd=python，后面的wd=python就是查询字符串。
• anchor：锚点，后台一般不用管，前端用来做页面定位的。
  注意：URL中的所有字符都是ASCII字符集，如果出现非ASCII字符，比如中文，浏览器会进行编码再进行传输。