H5 web 存储之 Webstorage

时间:2021-07-12 08:50:43

H5提供了两种在客户端存储数据的方式:
localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)
sessionStorage 针对一个session的本地存储
之前这些都是由cookie来完成的,cookie的特点是存储量小,在服务器和客户端之间来回传递,传输效率不高。一般可以在判断注册的用户是否登录该本网站。
webStorage API 继承于Window对象,并提供了两个新的属性-Window.localStorage 和 Window.sessionStorage.
webStorage的优势:

  1. 相比cookie存储容量增加
  2. 可以将请求的表单数据存于本地,减少http请求,节约带宽
  3. webStorage拥有易用的API

webStorage的局限性:

  1. 不同浏览器webStorage 和LocalStorage的大小不统一。
  2. 在浏览器的隐私模式下面是不可读取的
  3. 本质上是对字符串的读取,因此存储内容过多时页面会变卡
  4. 不能被爬虫抓取到

使用webStorage
1.存储数据:
  localStorage.name = 'value';
  localStorage['name'] = 'value';
  localStorage.setItem('name','value');
  注意键和值总是字符串。建议使用webStorage API(setItem,getItem,removeItem,key,length)
2.获取数据:
  var value = localStorage.getItem('name');
  var value = localStorage.name;
  var value = localStorage['name'];
3.删除数据:
  清空所有数据
    localStorage.clear();
  删除特定数据;
    localStorage.removeItem('name');
4.检测浏览器是否支持:
  function storageAvailable(type) {
    try {
      var storage = window[type],
      x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
    }
    catch(e) {
      return false;
    }
  }
  if (storageAvailable('localStorage')) {
    // Yippee! We can use localStorage awesomeness
  }
  else {
    // Too bad, no localStorage for us
  }
5.就是存储对象了,我们需要进行转换为字符串存入,等到使用的时候取出再转为对象。
  var str = JSON.stringify(obj);
  localStorage.mydata = str;
  var obj = JSON.parse(localStorage.mydata);
到这里就结束了,算是对webStorage基本使用的一些小总结,希望可以对你有所帮助。