本地存储

把信息存储在客户端本地, 谷歌控制台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是持久存储
最后修改日期:2019年10月1日

作者