cookie , sessionStorage , localStorage

ychen
944 阅读4分钟

cookie , sessionStorage , localStorage的区别是什么

  1. 都可以用来存储数据
  2. cookie一条数据大小不能超过4KB ，最多不能存储超过20条，如果没有设置过期时间，那么在浏览器关闭后消失
  3. sessionStorage是会话存储，一条大小不能超过5M，数量没有限制，关掉页面数据消失
  4. localStorage本地存储，一条大小不超过5M，数量没有限制，除非主动删除，否则数据不会消失
  5. cookie 可用于传递少量的数据， 是一个在服务器和客户端 之间来回传送文本值的内置机制，服务器可以根据 cookie 追踪 用户在不同页面的访问信息。

cookie 的特点：

  1. 大小的限制，cookie 的大小 限制 在 4KB 以内。
  2. 带宽的限制，cookie 数据 会在服务器和浏览器 之间来回传送，所以访问哪个页面，都会消耗网络的带宽。
  3. 安全风险，因为 cookie 会频繁在网络中传送， 所以在网络上是可见的，在不加密的情况下，是由安全风险的。
  4. 操作复杂，在客户端的浏览器中，使用 JavaScript 操作 cookie数据是比较复杂的。
  5. 所以，如果对于较小的数据，并且需要在服务器和客户端之间频繁传送时，才有 cookie 存在的意义。

web storage

  1. Web Storage 可以在客户端保存大量的数据，Web Storage本地存储的优势：
  2. 存储容量大。
  3. 零带宽。Web Storage 中的数据仅仅存储在本地，不会与服务器发生任何交互行为，不存在网络带宽的占用问题。
  4. 编程接口。提供了一套丰富的接口，使得数据操作更加方便。
  5. 独立的存储空间。每个域都有独立的存储空间，各个存储空间是完全能独立的，不会造成数据的混乱。

sessionStorage , localStorage

  1. 在 Web Storage 本地存储 包括 sessionStorage 会话存储 和 localStorage 本地存储。
  2. cookie 和 session 完全是服务器端可以操作的数据，sessionStorage 和 localStorage 完全是浏览器端操作的数据。
  3. cookie 和 session 完全继承同一个 Storage API, 所以 sessionStorage 和 localStorage 的编程接口是一样的。
  4. sessionStorage 和 locatlStorage 区别在于 数据存在时间范围 和 页面范围。
  5. sessionStorage: 数据只保存到存储它的窗口或标签关闭时，数据在构建它们的窗口或标签内也可见
  6. localStorage: 数据的生命周期比窗口或浏览器的生命周期长，数据可被同源的每个窗口或者标签共享。
  7. localStorage(长期存储)、sessionStorage(会话存储)是H5中的本地web存储提供的两个接口, 相当于前端一个小型的本地数据库，用于在本地存储一些不敏感的数据，隶属于window对象。

相同点：

两者的API完全相同，都是在浏览器端存储数据。

不同点

localStorage存储的数据是永久性数据,页面刷新，即使浏览器重启，甚至操作系统重启也不会丢失，并且存储的数据在同源（协议、域名、端口号一致）下的标签页和window窗口之间共享。

sessionStorage存储的数据有些苛刻，页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)。

localStorage的局限

  1. 各个浏览器的支持的大小不一样，业界认为是5M,并且在不同的浏览器不同版本支持度不一样
  2. localStorage的数据不能被爬虫抓取

如何设置和获取storage数据

保存数据到sessionStorage

window.sessionStorage.setItem("key”,"value");//setItem表示保存数据的方法

从sessionStorage中获取数据：

value = window.sessionStorage.getItem("key");//getItem()为获取数据的方法

保存数据的写法

window.sessionStorage.key = "value";
或者
window.sessionStorage["key"] = "value"

获取数据的方法

value = window.sessionStorage.key;
或者
value = window.sessionStorage["key"]

使用sessionStorage 和 localStorage

function DaDa() {
 window.localStorage.setItem("localKey", "localVlaue");
 
 // 获取
 console.log(window.localStorage.getItem("localKey"));
 
 window.sessionStorage.setItem("sessionKey", "sessionValue");
 
 // 获取
 console.log(window.sessionStorage.getItem("sessionKey"));
}

storage接口

interface Storage{
 readonly attribute unsigned long length;
 DOMString ? key(unsigned long index);
 getter DOMString getItem(DOMString key);
 setter creator void setItem(DOMString key, DOMString value);
 deleter void removeItem(DOMString key);
 void clear();
}
  1. length属性，表示当前storage对象中存储的键/值对的数量。
  2. Storage对象是同源的，length属性只能反映同源的键/值对数量
  3. key方法，获取指定位置的键。
  4. getItem方法，根据键返回相应的数据值。
  5. setItem方法，将数据存入指定键对应的位置。
  6. removeItem方法，从存储对象中移除指定的键/值对。
  7. clear方法，清除Storage对象中所有的数据，如Storage对象是空的，则不执行任何操作。

使用storage对象保存页面内容

// 保存数据到sessionStorage

function SaveStorage(frm) {
 var storage = window.sessionStorage;
 
 storage.setItem("name",frm.name.value);
 
 storage.setItem("age", frm.age.value);
}

遍历显示sessionStorage中的数据

function Show(){
 var storage = window.sessionStorage
 var result = "";
 for(var i=0; i<storage.length; i++){
  var key = storage.key(i);
  var value = storage.getItem(key);
  result += key + ":" + value + ";";
 }
}

H5的几种存储形式

  1. 本地存储-localStorage, sessionStorage
  2. 离线缓存 application cache
  3. indexedDB 和 webSQL

参考

juejin.cn/post/692333…

avatar
文章
阅读
粉丝