本地存储

本地存储：把一些信息存储到客户端本地（主要目的有很多，例如实现多页面之间的信息共享或性能优化）

• 方案预览
  • 离线缓存
  • localStorage / sessionStorage：H5中新增加的API，基于这个API可以把一些数据缓存到客户端本地（常用）
  • IndexedDB / webSQL ：本地数据库存储
  • cookie
  • CacheStorage / ApplicationCache：本地缓存存储
• 特点
  • 本地存储都是存储到当前浏览器指定的地方，但是本地存储信息不能跨浏览器进行传输
  • 存储的信息是按域来管理的，本地存储不能直接跨域访问
• 应用场景
  • 页面之间信息的通信
    A存储信息，B页面中可以获取的模式，例如实现日常开发中的登录（用户自动登录）、购物车或返回上级页面时停留在之前最后一次点击的位置等需求
  • 性能优化
    把一些不经常改变的数据，在第一次从服务器端获取到之后，存储到客户端本地（记录一个存储时间），假设我们设置有效存储期是10分钟，那么10分钟以内，我们再刷新页面，就不用再向服务器发送请求了，直接从本地数据中获取展示即可；超过10分钟，重新向服务器发送请求，请求回来最新数据参考第一次，也一样存储到本地中...这样的话就可以减轻服务器压力，另外对于不经常更新的数据我们可以把存储周期设置的长一些，有助于提升页面第二次加载的时候渲染的速度（移动端经常做这些事情）

---

session和cookie的关联

1.session是服务器存储，cookie是客户端存储
2.在服务器端建立session之后，服务器和当前客户端之间会建立一个唯一的标识(sid)，而本次存储的session信息都存放到对应的sid下（目的是为了区分不同客户端在服务器上建立的session信息）
3.当服务器端把一些成功或者失败的结果返回给客户端的时候，在响应头信息中会增加set-cookie字段，把connect.sid存储到客户端的cookie信息中
4.当客户端在向服务器发送任何请求的时候，在请求头中，都会把cookie信息带上，传递给服务器（包含了之前存储的connect.sid信息）

cookie和localStorage、sessionStorage的区别

温馨提示：真实项目中使用本地存储来完成一些需求的情况不是很多，一般都是基于服务器的session或者数据库存储完成的（服务器的session和本地的cookie是有关联的），如果不考虑兼容，就像基于本地存储来完成一些事情，那么一般都是用localStorage的（尤其是移动端开发）

---

sessionStorage和localStorage的操作方法

1.保存数据：在保存数据时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名(只能重新取键名，然后再保存键值)

// sessionStorage (二者皆可)
sessionStorage.setItem("key","value");
sessionStorage.key="value";

// localStorage(二者皆可)
localStorage.setItem("key","value");
localStorage.key="value";

2.读取数据

// sessionStorage (二者皆可)
let value = sessionStorage.getItem("key");
let value = sessionStorage.key;

// localStorage(二者皆可)
let value = localStorage.getItem("key");
let value = localStorage.key;

3.删除数据

// sessionStorage
sessionStorage.removeItem('key');  // 清除单个数据
sessionStorage.clear();            // 清除所有数据

// localStorage
localStorage.removeItem('key');  // 清除单个数据
localStorage.clear();            // 清除所有数据