本地存储和服务器存储

一、本地存储 VS 服务器存储

本地存储：把信息存储在客户端本地（谷歌控制台Application中都可以查看到）。

• cookie
• H5中WebStorage：Local Storage / Session Storage
• 本地数据库存储：IndexDB
• 本地缓存存储：manifest
• …

服务器存储：把数据存储在服务器端

• 数据库存储：SQLSERVER / MYSQL / ORACLE / MONGODB …
• REDIS
• SESSION
• …

二、什么时候会用到本地存储？本地存储的作用？

• 1.记住用户名和密码（或者自动登录）
• 2.未登录状态下，加入购物车的信息一般也先存储在本地，当登录后，把信息存储到服务器上（目的是多平台数据共享）
• 3.对于非实时刷新数据，我们可以在从服务器把数据获取到后，临时存储在本地（设置有效时间），在有效时间内页面刷新，不再重新从服务器获取数据，而是读取本地数据；超过有效时间重新从服务器拉取…（“前端性能优化的一点” ）
• 4.还能实现同一个网站不同页面之间的信息共享和通信

三、本地存储到底存储在哪了？

• 1.本地存储是受浏览器限制的，例如：在谷歌中存储的数据，在IE中获取不到
• 2.受源(域)的限制，例如：都是用谷歌浏览器，我在京东下存储的数据，在百度中是获取不到的

本地存储的信息在控制台中可以查看到（而且是明文存储），所以敏感的数据尽可能不要存储在本地，非要存储也要做安全处理（例如：加密）。

四、cookie、localStorage、sessionStorage语法

4.1 cookie

/*
 * 设置cookie  =>jquery.cookie.js
 *    document.cookie="[key]=[value];..." 
 */
// $.cookie('username', '珠峰培训');
// console.log($.cookie('username'));
// $.removeCookie('username');
/* $.cookie('username', 'zhufeng', {
	expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
}); */

4.2 localStorage / sessionStorage

例如：

localStorage.setItem('height',175);
sessionStorage.setItem('age',25);

• setItem([key],[value]) 存储信息
• getItem([key]) 获取信息
• removeItem([key]) 移除某一项信息
• clear() 清除所有存储的信息

• =>向本地存储的信息都是STRING字符串格式
• =>localStorage是持久化存储在客户端本地的（除非手动清除或者浏览器卸载等，否则一直存储下来，没有过期时间）
• =>sessionStorage会话存储（当前页面刷新，存储信息还在，但是只要页面一关闭，所有会话存储的信息都会消失）

五、cookie VS localstorage

• 1.大小限制：一般浏览器允许一个源下COOKIE最多存储8KB，而LOCALSTORAGE被允许存储最大的长度限制是5MB
• 2.兼容性：COOKIE兼容所有浏览器，而LOCALSTORAGE是H5中新增的，不兼容IE低版本浏览器（IE6~8）
• 3.稳定性：COOKIE有过期时间，但是一般不等到时间可能就没了（例如：清除浏览器的缓存或者历史信息、安全卫士在清理电脑垃圾等操作时，都有可能会把存储的COOKIE给清除掉），但是这些操作对LOCALSTORAGE没有影响
• 4.有时候浏览器会开启无痕浏览或者隐私模式，此时无法设置COOKIE，但是可以设置LOCALSTORAGE的信息
• 5.和服务器端的猫腻：COOKIE总是会和服务器中的SESSION眉来眼去（客户端和服务器端交互的时候，COOKIE信息会传来传去），而LOCALSTORAGE不屑于和他们同流合污（LOCALSTORAGE和服务器没有必然的联系，是单纯的本地存储）
• 6.存储时间：COOKIE有过期时间，而LOCALSTORAGE是持久存储

六、cookie和session的联系与区别