本地存储 VS 服务器存储

LYR的一盘小菜
1,400 阅读4分钟

本地存储

把信息存储在客户端本地, 谷歌控制台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', 'xiaoxiao', {
	expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
});

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

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

COOKIE VS LOCALSTORAGE的区别

  • 1.大小限制：一般浏览器允许一个源下COOKIE最多存储4k，而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是持久存储
avatar
文章
阅读
粉丝