JS Web API 存储

JavaScript学习 本文总阅读量次

cookie

  • 原本用于浏览器和server通讯（hhtp请求），最早是被“借用”到本地存储来的（因为localstorage和sessionstorage是html5才提出的）
  • js中可用docuiment.cookie ='...'来修改cookie
  • cookie是字符串形式，通过分号分隔例子
  • 可查看分隔开的cookie：可查看分隔开的cookie
  • 前端设置（添加）/查看cookie，键=值：前端设置（添加）/查看cookie
    • 每次只能设置（添加）一个键值对
    • 同key则覆盖，不同key则追加

cookie做本地存储

  • 在localstorage和sessionstorage未出现前，cookie是唯一可做本地存储的，只要不清除cookie，不管页面怎么刷新，cookie都不变
  • 缺点：
    • 存储大小，最大4KB
    • 每次http请求时需要同时将本地存储的数据发送到服务端，增加了请求数据量（毕竟他的本职就是和server通讯，不适合带上太多数据）
    • 只能用document.cookie ='...'来修改，api太过简陋

html5存储

localStorage和sessionStorage

  • HTML5专门为存储而设计，最大可存5M（每个域名下）
  • API简单易用（setItem getItem）
  • 不会随着http 请求被发送出去

使用方法

  • sessionStorage使用方法:
    • 保存数据语法：sessionStorage.setItem("key", "value");
    • 读取数据语法：var lastname = sessionStorage.getItem("key");
    • 删除指定键的数据语法：sessionStorage.removeItem("key");
    • 删除所有数据：sessionStorage.clear();
  • localStorage使用方法:
    • 创建缓存localStorage.setItem('userInfo', userInfo);
    • 读取缓存localStorage.getItem('doEdit', this.doEdit);
    • 清除所有缓存localStorage.clear();
    • 清楚指定缓存localStorage.removeItem('userinfo');

例子

注意：key和value最终都会被强转为字符串形式
设置/获取localStorage和sessionStorage
查看localStorage和sessionStorage

区别

  • localStorage数据会永久存储，除非代码或手动删除
  • sessionStorage数据只存在于当前会话，浏览器或标签页关闭则清空
  • 一般用localStorage会更多一些

相关面试题

描述cookie localStorage sessionStorage区别

  • 共同点：都保存在浏览器端。
  • 区别：
  1. 生命周期：
    • Cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。未设置则默认为关闭浏览器后失效。(不是浏览器标签页，而是整个浏览器)
    • Localstorage:除非被手动清除，否则永久保存，窗口或浏览器关闭也一直保存，因此用作持久数据。
    • Sessionstorage：仅在当前标签页下有效，关闭页面或浏览器后就会被清除（刷新页面不会被清除），自然也就不可能持久保持。
      • 注意：
        • 单个窗口开启多个页面（同域名）时，不同标签页之间，相同域名下的sessionStorage是不同的。
        • 多窗口情况，即使是同一页面，每个页面都有自己独立保存了一份sessionStorage，互不影响。
        • sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页，通过其它方式新开的窗口或标签不认为是同一个session。打开标签页的方式不同有可能会导致你期望传递的数据传过去发现为空的问题。但就算sessionStorage传递到新窗口/页面，新旧窗口数据也不会互相同步，增删查改只和自己所处的窗口/页面有关。
  2. 存放数据：
    • Cookie：4k左右（cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下）
    • Localstorage和sessionstorage：可以保存5M的信息
  3. 是否跟随http请求发送出去：
    • Cookie：每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题
    • 其他两个：不会自动把数据发给服务器，仅在客户端即浏览器中保存，不参与和服务器的通信
  4. API易用性：
  5. 应用场景：
    • 从安全性来说，因为每次http请求都回携带cookie信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多，但是对于用户识别用户登陆来说，cookie还是比storage好用
    • 其他情况下可以用storage，localstorage可以用来在页面传递参数
    • sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数。
  6. 作用域：
    • cookie和localStorage：在所有同源窗口中都是共享的
    • sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）
    • 关于同源可参考阮一峰，简单来说就是A网页设置的 Cookie，B网页不能打开
JavaScript学习