前端本地存储cookie localstorage

本地存储：把信息存储在客户端本地
谷歌控制台 Application中都可看到
cookie
H5中 WebStorage:localStorage/sessionStorage
本地数据库存储：IndexDB
本地缓存存储：manifest
...
服务器存储：把数据存储在服务器端
数据库存储：SQLSERVER/ MYSQL / ORACLE /MONGODB...
REDIS缓存
SESSION

//什么时候会用到本地存储，本地存储的作用
//1、记住用户名和密码(自动登录)
//2、未对于非实时刷新数据登录的状态下，加入购物车的信息，当登录后，把信息存储到服务器上(目的是多平台数据共享)
//3、对于非实时刷新数据，我们可以在从服务器把数据获取到，临时存储在本地(设置有效时间)，在有效时间内页面刷新，不在重新从服务器获取数据，而是读取本地数据；超过有效时间重新从服务器拉取
//4、同一个网站，不同页面之间的信息共享和通信

本地存储到底存储在哪了
1、本地存储是受浏览器限制的，例如在谷歌中存储的数据，在IE中获取不到
2、受源的限制，例如：都是用谷歌浏览器，我在京东下存储的数据，在百度是获取不到的
本地存储的信息在控制台中可以查看到（而且是明文存储），所以敏感的数据尽可能不要存储在本地，非要存储也要做安全处理(例如 加密)

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

向本地存储的信息都是string字符串格式
localStorage.setItem("name","珠峰培训")
localStorage.removeItem("name")

localStorage是持久化存储在客户端本地的(除非手动清楚或者浏览器卸载等，否则一直存储下来，没有过期时间)
sessionStorage 会话存储，当前页面刷新，存储信息还在，但是只要页面一关闭，所有回话存储的信息都会消失

设置cookie
原生设置方法
document.cookie = "username=12"
document.cookie = "username=12"

jquery.min.js
jquery.cookie.js
$.cookie('username','珠峰培训');
console.log($.cookie('username'));
$.removeCookie('username');
设置过期时间
$.cookie('username','zhufeng',{
    expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
})

cookie vs localStorage
1、大小限制，一般浏览器允许一个源下cookie最多存储8kb，localstorage 最大5MB
2、兼容性 cookie 兼容所有浏览器，而localstorage 是h5中新增的，不兼容ie低版本浏览器6-8
3、稳定性，cookie有过期时间，但是一般不等时间可能就没了(例如，清楚浏览器的缓存或者历史信息，安全卫士在清理电脑垃圾等操作是，都有可能把cookie清除掉)，但是这些操作 对localstorage 没有影响
4、有时候浏览器会开启无痕模式或隐私模式，此时无法设置cookie，但是可以设置localstorage的信息
5、客户端和服务器交互的时候，coolkie总是会和服务器的session传来传去，localstorage和服务器没有必然联系，都是单纯的本地存储
6、存储时间，cookie有过期时间，而localstorage是持久存储