JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB

时间:2022-08-26 08:53:07

基本概念

1、localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的

2、localStorage和sessionStorage的区别:

(1)、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

(2)、他们都是只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

(3)、localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。(记录在内存中的)

  sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被关闭了,那么所有通过sessionStorage存储的数据也就被清空了(回话性质的储存)

(4)、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

  这里需要注意的是,页面及标签页仅指*窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。(同源原则)

3、localStorage和sessionStorage可存储数据的大小一般为5MB

具体使用

localStorage和sessionStorage使用起来具有相同的API,例如setItem、getItem和removeItem等

存储的方式以键值对的形式(key-value)

function testlocalStorage()
{
  var data="my name is Russ";
  localStorage.setItem('name',data);//存储key为name的数据data
  localStorage.getItem('name');//获取key为name的数据--my name is Russ
  localStorage.removeItem("key");//删除key为name的数据
  localStorage.clear()//清空所有localStorage的数据

  //保存后台返回的JSON对象型的数据
  var json_data={
    a:'1',
    b:'2',
    c:'3'
  }
  var dd=JSON.stringify(json_data)
  //因为目前localStorage保存的数据都是字符串类型的
  localStorage.setItem('KEY1',dd)
  //同理获取的时候字符串转成json对象
  var model=JSON.parse(localStorage.getItem('KEY1'))
}
function testlocalStorage()
{
  var data="my name is Russ";
  sessionStorage.setItem('name',data);//存储key为name的数据data
  sessionStorage.getItem('name');//获取key为name的数据--my name is Russ
  sessionStorage.removeItem("key");//删除key为name的数据
  sessionStorage.clear()//清空所有sessionStorage的数据


  //保存后台返回的JSON对象型的数据
  var json_data={
    a:'1',
    b:'2',
    c:'3'
  }
  var dd=JSON.stringify(json_data)
  //因为目前sessionStorage保存的数据都是字符串类型的
  sessionStorage.setItem('KEY1',dd)
  //同理获取的时候字符串转成json对象
  var model=JSON.parse(sessionStorage.getItem('KEY1'))
}
//sessionStorage和localStorage对应的length属性以及提供的key方法可以进行遍历
function forEachStorage(){
  var storage = window.localStorage;//window.sessionStorage
  for(var i=0, len=storage.length; i<len;i++){
    var key = storage.key(i);//取到具体key值
    var value = storage.getItem(key); //取对应的value值
    console.log(key + "=" + value);
  }
}

 indexDB应用于web程序中

相信这个链接对我们理解indexDB有很大的帮助(英文的可以借助浏览器帮助翻译一下)

看完后我们进入indexDB在项目中的实际运用