本地存储 VS 服务器存储

本地存储

把信息存储在客户端本地, 谷歌控制台Application中均可以查看到

• cookie
• H5中WebStorage：localStorage / sessionStorage
• 本地数据库存储：IndexDB
• 本地缓存存储：manifest...

服务器存储

把数据存储在服务器端

• 数据库存储：SQLSERVER / MYSQL / ORACLE / mongodb ...
• REDIS
• SESSION...

何时会用到本地存储？本地存储的做用？

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

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

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

本地存储的信息在控制台中能够查看到（并且是明文存储），因此敏感的数据尽量不要存储在本地，非要存储也要作安全处理（例如：加密）

1.localStorage

• 向本地存储的信息都是STRING字符串格式
• localStorage是持久化存储在客户端本地的（除非手动清除或者浏览器卸载等，不然一直存储下来，没有过时时间）

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

localStorage.setItem('name','蓝蓝');  
复制代码

2. sessionStorage

• sessionStorage会话存储（当前页面刷新，存储信息还在，可是只要页面一关闭，全部会话存储的信息都会消失）

3. cookie

1>设置cookie

语法：document.cookie="[key]=[value];..."

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
复制代码

• 能够添加有效日期（UTC 时间）。默认状况下，在浏览器关闭时会删除 cookie：

• 经过 path 参数，您能够告诉浏览器 cookie 属于什么路径。默认状况下，cookie 属于当前页。

2> 经过 JavaScript 读取 cookie

var x = document.cookie;
复制代码

document.cookie 会在一条字符串中返回全部 cookie，好比：cookie1=value; cookie2=value; cookie3=value;

3>删除 cookie

直接把 expires 参数设置为过去的日期便可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

// 设置cookie =>jquery.cookie.js
// 引入
<script src="client/js/jquery.min.js"></script>
<script src="client/js/jquery.cookie.js"></script>

$.cookie('username', '蓝蓝');
console.log($.cookie('username'));
$.removeCookie('username');
$.cookie('username', 'zhufeng', {
	expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
});
复制代码

应该定义 cookie 路径以确保删除正确的 cookie。

若是你不指定路径，一些浏览器不会让你删除 cookie。

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是持久存储