[ 本地存储 ]
把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)
1、不能跨浏览器传输：在谷歌浏览器中存储的信息，在IE浏览器中无法获取，因为本地存储是存在当前浏览器中的某个具体位置的
2、不能跨域传输：在京东域下存储的信息，在淘宝域下不能获取到（也是为了保证信息的安全性）
3、本地存储并不安全，有一些大神们可以找到每个浏览器存储信息的位置，然后把信息进行解码编译，导致客户端一些存储的信息泄露
...
cookielocalStoragesessionStorage- IndexedDB
- WebSQL
- Cache Storage
- Application Cache
- Manifest
- ...
[ 服务器存储 ]
把信息存储在指定的服务器中（真实项目中大部分都是基于服务器进行存储的）
- session
- 服务端数据库存储
- 服务端缓存存储
- ...
localStorage VS sessionStorage
他们都是H5中新增加的API（不兼容低版本浏览器，常应用于移动端开发）
localStorage：本地永久存储（只要你自己不手动删除，本地就存储着）
sessionStroage：本地会话存储，当前页面关闭，代表着会话结束，会把存储的信息自动清除（刷新页面不会清除）
都支持以下使用方法：
1、setItem([key],[value])：通过键值对的方式把信息存储在客户端本地（存储在本地的信息值都是字符串格式的）
2、getItem([key])：获取本地存储信息中指定属性名的属性值
3、removeItem([key])：把本地存储信息中指定属性名的信息删除掉
4、clear()：把本地存储的信息都删除掉（清空：只能清空当前浏览器自己域下的信息）
5、key([index])：本次存储的信息是有一定顺序的（一般都是按照存储的先后顺序），我们可以把所有存储的信息理解为一个信息集合，key就是通过索引获取这个集合中指定位置的属性名信息的
...
localStorage VS cookie
cookie是一个非常常用的本地存储方式，在没有localStorage之前，基本上使用的都是cookie
[ cookie如何使用 ]
/*--COOKIE--*/
let cookie = (function () {
let setValue = (name, value, expires = (new Date(new Date().getTime() + (1000 * 60 * 60 * 24))), path = '/', domain = '')=> {
document.cookie = `${name}=${escape(value)};expires=${expires.toGMTString()};path=${path};domain=${domain}`;
};
let getValue = name=> {
let cookieInfo = document.cookie,
reg = new RegExp(`(?:^| )${name}=([^;]*)(?:;|$)`),
ary = cookieInfo.match(reg);
return ary ? unescape(ary[1]) : null;
};
let removeValue = (name, path = '/', domain = '')=> {
let value = getValue(name);
if (value) {
document.cookie = `${name}= ;path=${path};domain=${domain};expires=Fri,02-Jan-1970 00:00:00 GMT`;
}
};
return {
set: setValue,
get: getValue,
remove: removeValue
}
})();
1、兼容问题
- cookie兼容所有浏览器
- localStorage所有低版本浏览器都不兼容，例如：IE6~8
真实项目中PC端开发，如果需要存储的信息比较重要（例如：登录信息、购物车信息等），需要兼容的，只能用cookie，其余不需要考虑兼容的，根据需求自己选择即可
2、时效性
- cookie有过期时间（我们可以自己设置，一般都不会设置很长）
- localStorage没有过期时间，只要自己不手动清除，永久存储在本地
使用360等安全卫士清理垃圾的时候，或者使用浏览器自带的清理工具的时候，都极有可能会把本地存储的cookie都干掉，但是目前是干不掉localStorage存储的信息的
用户可能出于安全角度，禁止记录cookie，例如浏览器的无痕浏览模式或者隐私模式
3、存储大小
- cookie允许一个域下最多可以存储4KB左右的内容
- localStorage允许一个域下最多可以存储5MB左右的内容
真实项目中基于本地存储，存储的信息量不会特别多（使用localStorage存储的可能还多一些），大量的信息都需要基于服务器进行存储
4、处理机制
- cookie不是完全的本地存储，在我们使用cookie的时候，需要客户端和服务器端进行相关的通信处理（cookie总会在客户端和服务器端来回进行传输）
- localStorage是完整的本地存储，和服务器端没有半毛钱关系
5、安全性
不管cookie还是localStorage都是本地明文存储：控制台 -> Application 可以看到存储的内容重要的信息不建议在本地进行存储（例如：用户名、密码、手机等），如果非要存储，一定要做好加密工作
网友评论