目录

  1. 本地存储
    1. cookie
      1. 优点
      2. 缺点
      3. 为什么需要cookie
      4. 如何使用cookie
      5. 注意
    2. localStorage
      1. 优点
      2. 缺点
    3. sessionStorage
      1. 使用语法
    4. session
    5. cookie 和 session 的区别
    6. localStorage 和 sessionStorage
    7. cookie 和 webStorage 的区别

本地存储

本地存储主要有以下几种，cookie，localStorage和sessionStorage，WebSql和IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。他们都可以将数据存储在浏览器，应该根据不同的场景进行使用。本文主要讲前三个。

cookie机制采用的是在客户端保持状态的方案
Cookie的主要内容包括：名字，值，过期时间，路径和域。
可设置失效时间，没有设置的话，默认是关闭浏览器后失效。
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

优点

　　1. 给用户更人性化的使用体验，如记住“密码功能”、老用户登录欢迎语
　　2. 弥补了HTTP无连接特性
　　3. 站点统计访问人数的一个依据
　　4. 所有新旧浏览器都支持。

缺点

　　1. 它无法解决多人共用一台电脑的问题，带来了不安全因素
　　2. Cookie文件容易被误删除
　　3. 一人使用多台电脑
　　4. Cookies欺骗。修改host文件，可以非法访问目标站点的Cookie
　　5. 容量有限制，不能超过4kb
　　6. 在请求头上带着数据安全性差

为什么需要cookie

　　当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
　　当用户访问 web 页面时，他的名字可以记录在 cookie 中。
　　在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储，如下所示:
username=John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

如何使用cookie
1
2
3
4
5
6
7
8
9
10
# 创建Cookie
document.cookie="username=John Doe";
# 读取 Cookie
var x = document.cookie;
# 修改 Cookie
document.cookie="username=John Smith; 
expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
# 删除 Cookie
# 删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意

如果 cookie 被篡改了怎么办？
预防 Cookie 被篡改
set-cookie时加上防篡改验证码。

localStorage

　　localStorage主要是前端开发人员，在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
　　可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。
localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同

优点

　　1. localStorage拓展了cookie的4k限制
　　2. localStorage可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽
　　3. localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

缺点

　　1. 需要手动删除，否则长期存在
　　2. 浏览器大小不一，版本的支持也不一样
　　3. localStorage只支持string类型的存储，JSON对象需要转换
　　4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

1
2
3
4
5
6
7
8
9
10
11
12
localStorage.setItem('x', 121313);
localStorage.setItem('xxxx', 'baozhen');
localStorage.getItem('x');

for(let i = 0; i< localStorage.length; i++) {
  var name = localStorage.key(i);
  var value = localStorage.getItem(name)
  console.log("name:", name, "value:", value);
}

localStorage.removeItem("x");
localStorage.clear();

sessionStorage

　　sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

使用语法
1
2
3
4
5
6
7
8
# 保存数据语法：
sessionStorage.setItem("key", "value");
# 读取数据语法：
var lastname = sessionStorage.getItem("key");
# 删除指定键的数据语法：
sessionStorage.removeItem("key");
# 删除所有数据：
sessionStorage.clear();

session

　　由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session。
　　Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中。
　　典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户的状态，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多，内存、数据库、文件都有。
　　session机制采用的是在服务器端保持状态的方案。存在服务器的一种用来存放用户数据的类HashTable结构。
　　浏览器第一次发送请求时，服务器自动生成了一HashTable和一SessionID来唯一标识这个HashTable，并将其通过响应发送到浏览器。浏览器第二次发送请求会将前一次服务器响应的
Session ID放在请求中一并发送到服务器上，服务器从请求中提取出Session ID，并和保存的所有Session ID进行对比，找到这个用户对应的HashTable。

  • cookie数据存放在客户的浏览器上，session数据放在服务器上。
  • session 中保存的是对象，cookie 中保存的是字符串。
  • session 不能区分路径，同一个用户在访问一个网站期间，所有的session在任何地方都可以访问到。而 cookie 中如果设置了路径参数，那么同一个网站不同路径下的 cookie 互相是不可以访问的。
  • cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
  • session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。
  • 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

localStorage 和 sessionStorage

　　localStorage 和 sessionStorage两者的区别在于储存的有效期和作用域的不同：数据可以储存多长时间以及谁拥有数据的访问权。

名称 有效期 作用域
localStorage 永久性 同源文档
sessionStorage 当前窗口 同源文档
  • webStorage 的优势
    • 从容量上讲WebStorage一般浏览器提供5M的存储空间。
    • 安全性上WebStorage 并不作为 HTTP header 发送的浏览器，所以相对安全。
    • 从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省。 Cookie和webstorage区别
    • 数据的有效期不同
      • Webstorage:1.localstorage 2.sessionstorage
      • sessionStorage：仅在当前的浏览器窗口关闭有效；
      • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据,除非手动删除；
      • cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭
    • 作用域不同
      • sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
      • localStorage：在所有同源窗口都是共享的；
      • cookie：也是在所有同源窗口中共享的
    • webStorage支持事件通知机制，可以将数据更新的通知发生给监听者
    • WebStorage

转载：
　　cookie和session, cookie和webStorage的区别
　　浏览器缓存原理以及本地存储
　　知乎问答