JS随手笔记3

SessionStorage和LocalStorage

和Cookie一样，SessionStorage和LocalStorage也是用于存储网页中的数据的

Cookie、SessionStorage和LocalStorage区别

1. 生命周期（同一个浏览器下）

   Cookie 默认是关闭浏览器后失效，但是也可以设置过期时间

   SessionStorage 仅在当前会话（窗口）有效,关闭窗口或浏览器后被清除，不可以设置过期时间

   LocalStorage 除非被清除，否则永久保存

2. 容量

   Cookie 有大小（4KB左右）和个数（20~50）限制

   SessionStorage 有大小限制（5M左右），不同操作系统具体不同，无个数限制

   LocalStorage 有大小限制（5M左右），不同操作系统具体不同，无个数限制

3. 网络请求

   Cookie 每次都会携带在HTTP头中，如果使用cookie保存过多的数据会带来性能问题

   SessionStorage 仅在浏览器中保存，不会参与和服务器的通讯

   LocalStorage 仅在浏览器中保存，不会参与和服务器的通讯

4. 应用场景

   Cookie 判断用户是否登录

   SessionStorage 表单数据

   LocalStorage 购物车

5. 注意点 :无论通过哪种方式存储数据，切记不要将敏感数据直接存储在本地

SessionStorage / LocalStorage 使用

用法一模一样，只是生命周期不同

// 增删改查
// 1.增加
sessionStorage.setItem("key":"value")
localStorage.setItem("key":"value")

// 2.删除
sessionStorage.removeItem("key")
localStorage.removeItem("key")

// 3.修改
sessionStorage.setItem("key":"value2")
localStorage.setItem("key":"value2")

// 4.查找
sessionStorage.getItem("key")   // value
localStorage.getItem("key") // value

// 5.清空所有 sessionStorage
sessionStorage.clear()
localStorage.clear()

---

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也是最基本的安全功能

所谓同源是指：协议，域名，端口 都相同，就是同源，否则就是跨域

http://www.kevin.com"80/index.html

协议: http/https/...
一级域名: kevin.com/baidu.com/...
二级域名: www/study/edu/...
端口号: 80/3306/...
资源路径: index.html

// 协议，域名，端口 都相同，属同源，否则是跨域
http://www.kevin.com"80/index.html
http://www.kevin.com"80/index2.html

跨域解决方案

jsonp

什么是jsonp

• JSONP让网页从别的地址（跨域的地址）获取数据，即跨域读取数据

JSONP实现跨域访问的原理

利用同一个页面中定义多个script标签，通过src导入不同的地址，src属于没有同源限制，可以相互访问