前端技术文档前端技术文档
前端技术文档
  • HTML 文档
  • CSS 文档
  • JavaScript 文档
  • Browser 文档
  • Environment 文档
  • IMGProcess 文档
  • Interview 文档
前端技术文档
  • HTML 文档
  • CSS 文档
  • JavaScript 文档
  • Browser 文档
  • Environment 文档
  • IMGProcess 文档
  • Interview 文档
  • HTML 文档
  • DOCTYPE
  • HTML5新特性
  • HTML语义化
  • HTML节点操作
  • Canvas基础
  • Web Worker
  • DOM和BOM的区别
  • 行内元素和块级元素
  • 默认行为及阻止
  • 实现图片懒加载
  • 实现三栏布局
  • 实现瀑布流布局
  • 实现加载提示组件
  • 实现消息提示组件
  • 实现拼图滑动验证码
  • 手动实现轮播图
  • 蒙层禁止页面滚动的方案
  • 前端性能优化方案
  • 常见的兼容性问题
  • 可替换元素和非替换元素
  • Attribute和Property的区别
  • Cookie与Session
  • localStorage与sessionStorage
  • HTML与XHTML区别
  • iframe框架及优缺点
  • Service Worker的应用
  • Shadow DOM的理解
  • SVG与foreignObject元素
  • 图片等比例缩放方案
  • 300ms点击延迟

localStorage与sessionStorage

localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。

相同点

  • 都与HTTP无关,是HTML5提供的标准,当发起HTTP请求时不会与Cookie一样自动携带。
  • 都是以键值对的形式存在,即Key-Value形式,常用的Api也相同。
  • 存储类型都是String类型,当进行存储时,会调用toString()方法转为String类型。
  • 对于每个域容量是有限的,不同浏览器不一样,大部分存储为5M左右。

不同点

  • localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
  • SessionStorage会在用户关闭浏览器后,即会话结束后,数据失效;SessionStorage与服务端Session无关。

常用操作

  • 储存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
/**
 * 由于存储数据会调用 toString() 方法
 * Object 类型会存储为 [object Object] 字符串
 * 所以进行存储时需调用 JSON.stringify() 转化为字符串
 * 取出时调用 JSON.parse() 将字符串转回对象
 */
  • 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');
  • 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');
  • 清空数据
localStorage.clear();
sessionStorage.clear();

每日一题

https://github.com/WindrunnerMax/EveryDay
Prev
Cookie与Session
Next
HTML与XHTML区别