前端的本地存储不可不知了

前端工匠
282 阅读4分钟

cookie

  1. 作用：
  • cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。
  1. 特征：
  • 不同的浏览器存放的cookie位置不一样，也是不能通用的。cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁
  1. cookie值既可以设置，也可以读取：
  • 1.客户端设置
  • document.cookie ='名字=值';document.cookie ='username=cfangxu;domain=baike.baidu.com'
    1. 服务器端设置
  • 不管你是请求一个资源文件（如 html/js/css/图片），还是发送一个ajax请求，服务端都会返回response。而response header中有一项叫set-cookie，是服务端专门用来设置cookie的。
    1. 读取我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，它包含了当前网站下所有的cookie（为避免跨域脚本(xss)攻击，这个方法只能获取非 HttpOnly 类型的cookie）。它会把所有的cookie通过一个分号+空格的形式串联起来，例如username=chenfangxu; job=coding修改 cookie要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。
  1. cookie的属性：
  • 一般设置天数：new Date().setDate( oDate.getDate() + 5 ); 比当前时间多5天。

localStorage（本地存储）

  1. 特点：
  • HTML5新方法，不过IE8及以上浏览器都兼容。
  • 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
  • 存储的信息在同一域中是共享的。
  • 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
  1. 大小：
  • 一般是5M（跟浏览器厂商有关系）。在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
  1. 设置：
  • localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡localStorage受同源策略的限制设置localStorage.setItem('username','cfangxu');
  1. 获取：
  • localStorage.getItem('username') 也可以获取键名 localStorage.key(0)
  1. 删除：
  • 获取第一个键名删除localStorage.removeItem('username')
  • 也可以一次性清除所有存储localStorage.clear()

sessionStorage

  1. 特点：
  • 与localStorage类似，也是本地存储，是会话本地存储。用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

cookie、localStorage、sessionStorage的区别

  1. 相同：
  2. 在本地（浏览器端）存储数据。
  3. 不同：
  4. localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
  5. sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
  6. localStorage是永久存储，除非手动删除。sessionStorage当会话结束（当前页面关闭的时候，自动销毁）cookie的数据会在每一次发送http请求的时候，同时发送给服务器,而localStorage、sessionStorage不会。
avatar
文章
阅读
粉丝