浏览器的本地存储

Maike
164 阅读5分钟

浏览器有哪些本地存储的方式？

  • cookie：在HTML5标准前的本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来比较麻烦，需要自行封装

  • LocalStorage：HTML5加入的以键值对（key-value）的形式，优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+

  • sessionStorage：与localStorage基本类似，区别是sessionStorage会在当前页面关闭之后会被清理，而且与cookie、localStorage不同，它只能在同一窗口的同源页面被访问

  • Web SQL：2010年被W3C废弃的本地数据库数据存储方式 ，但是主流浏览器（火狐除外）都已经有了相关的实现，web SQL类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，比较繁琐

  • IndexedDB：是被正式纳入HTML5标准的数据库存储方式，它是NoSQL数据库，用键值对进行存储，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便

Cookie

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie的大小只有4kb，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie。

特性

  • Cookie一旦创建成功，名称就无法修改
  • Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的Cookie
  • 每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
  • 有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的
  • Cookie在请求一个新的页面的时候都会被发送过去

如果需要域名之间跨域共享Cookie，有两种方法：

  1. 使用Nginx反向代理
  2. 在一个站点登陆之后，往其他网站写Cookie。服务端的Session存储到一个节点，Cookie存储sessionId

使用场景

  • 最常见的使用场景就是Cookie和session结合使用，我们将sessionId存储到Cookie中，每次发请求都会携带这个sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。
  • 可以用来统计页面的点击次数

LocalStorage

LocalStorage是HTML5新增加的特性，有的时候我们存储的信息比较大时，cookie就不能满足我们的需求，此时LocalStorage就派上用场了

优点：

  • 在大小方面，LocalStorage的大小一般为5M，可以存储更多的信息
  • LocalStorage是持久存储，不会随着页面的关闭而销毁，除非手动清除，否则会一直存在
  • 仅本地存储，不能像cookie那样每次http请求时都会被携带

缺点：

  • 存在浏览器兼容问题，IE8以下版本的浏览器不支持
  • 如果浏览器设置为隐私模式，那将无法读取到LocalStorage
  • LocalStorage受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会被访问

使用场景

  • 有些网站会有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候就可以直接操作LocalStorage中的数据即可

  • 在网站中的用户浏览信息也会存储在LocalStorage中，还有网站中一些不常变动的个人信息等也可以保存在本地的LocalStorage之中

常用的API

// 保存数据到 localStorage 
localStorage.setItem('key', 'value'); 

// 从 localStorage 获取数据 
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据 
localStorage.removeItem('key'); 

// 从 localStorage 删除所有保存的数据 
localStorage.clear(); 

// 获取某个索引的Key 
localStorage.key(index)

例如：

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

// 获取某个索引的Key
localStorage.key(index)

添加和读取：

// 保存一个username为admin和password为admin123的数据到localStorage中
localStorage.setItem('username', 'admin')
localStorage.setItem('password', 'admin123')

// 读取localStorage中username所对应的数据
let data = localStorage.getItem('username')
console.log(data);

image.png

删除指定数据：

// 从localStorage中删除key为username的数据
localStorage.removeItem("username")

image.png

删除所有数据：

// // 将localStorage中的数据全部删除
localStorage.clear()

image.png

获取某一个索引的key:

// 获取localStorage中索引值为0和1的key
const kdataZero = localStorage.key(0)
const kdataOne = localStorage.key(1)
console.log(kdataZero);
console.log(kdataOne);

image.png

SessionStorage

SessionStorage也是HTML5中新增加的特性，SessionStorage主要用于临时保存同一窗口（或标签页）的数据，刷新页面时不会删除，关闭窗口或标签页之后会将这些数据删除。

优缺点

SessionStorage的优缺点与LocalStorage类似，但在同源策略上SessionStorage比LocalStorage有一条更加严格的限制，SessionStorage只有在同一浏览器的同一窗口下才能共享

使用场景

  • 因为SessionStorage具有时效性，所以可以用来存储一些网站中游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息就会随之清除。

常用API

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)

添加和读取：

// 保存数据到SessionStorage中
sessionStorage.setItem("username", "admin")
sessionStorage.setItem("password", "admin123")

// 从SessionStorage中读取key为username的数据
let data = sessionStorage.getItem('username')
console.log(data);

image.png

删除指定数据：

// 从SessionStorage中删除key为password的数据
sessionStorage.removeItem("password")

image.png

删除全部的数据：

// 清除SessionStorage中全部的数据
sessionStorage.clear()

image.png

获取某一个索引的key：

// 获取指定索引值的key
let kdataZero = sessionStorage.key(0)
let kdataOne = sessionStorage.key(1)

console.log(kdataZero, kdataOne);

image.png

avatar
文章
阅读
粉丝