web存储---Storage

Author Avatar
芝士君 3月 13, 2017
  • 在其它设备中阅读本文章

前言

作为 Web Storage API 的接口,Storage 提供了访问特定域名下的会话存储(session storage)或本地存储(local storage)的功能,例如,可以添加、修改或删除存储的数据项。
如果你想要操作一个域名的会话存储(session storage),可以使用 Window.sessionStorage;如果想要操作一个域名的本地存储(local storage),可以使用 Window.localStorage
— —       FROM   MDN

不同的浏览器是不共享Storage的
总之,这两个功能都是用来存储浏览器一些数据(如一些HTML5的游戏数据或者是天猫京东购物车信息之类的),并且他们的属性和方法是一样的,除了存储时长和作用域不同:

sessionStorage(一旦标签被关闭了,sessionStorage存储的数据也会被删除掉。不同标签页的同一个页面拥有各自的sessionStorage,数据不能共享。)
localStorage(长期存在,除非手动清除,并且存储在浏览器中)

(如果是隐私浏览模式的话,会重新创建数据库存储localStorage的数据,并且在关闭浏览器时,清除所有数据)

所以只用localStorage举例就行了
其实localStorage相当于一个数据库,我们就以数据库的增删改查来看
并且
因为是HTNL5的新特性,所以先看浏览器支不支持先

if(!window.localStorage){
    alert("该浏览器不支持localstorage");
    return false;
    } else{
        ...
}

有3种方法

var storage = window.localStorage;
storage["a"] = 1;
storage.b = 2;
storage.setItem("c", 3);
console.log(typeof storage["a"]);  //string
console.log(typeof storage["b"]);  //string
console.log(typeof storage["c"]);  //string

由于localStorage只能存储字符串,所以当你传入非字符串类型的值时,会被转化为string类型

同样3种方法

storage.a;   //"1"
storage["b"];  //"2" 
storage.getItem("c");  //"3"

其实增查的前两种方法和对象值的获取类似,不过官方推荐使用setItem()/getItem()

删除某个键

 console.log(storage.getItem("a"));  //"1"
 storage.removeItem("a");
 console.log(storage.getItem("a"));  //null

删除localStorage的所有内容

 console.log(localStorage);  //[object Storage] {b: "2", c: "3"}
 storage.clear();  
 console.log(storage.getItem("c"));  //null

直接对值进行修改即可

 storage.b = 5;
 console.log(storage.b);
 storage.setItem("c",10);
 console.log(storage.c);

获取键名

 storage.clear();  //先清除之前的所有数据
 storage.setItem("name","cheesekun");
 console.log(storage.key(0));  //"name"

json格式存储

由于storage只能存储字符串,所以我们需要先存储json字符串,
使用时再把json字符串转化为json对象,再获取键值

  • json小介绍
    • json对象

      var str1 = { "name": "cheesekun", "age": 19 };
      转化为json字符串: var obj = JSON.stringify(str1);

    • json字符串

      var str2 = '{ "name": "cheesekun", "age": 19 }';
      转化为json对象: var obj = JSON.parse(str2);

var storage=window.localStorage;
var me = {
  name: 'cheesekun',
  age: 19
  };
var meStr = JSON.stringify(me);
storage.setItem("data", meStr); //将json字符串传入localStorage
var json=storage.getItem("data");  
var meObj=JSON.parse(json);  //将json字符串转换成为JSON对象输出
console.log(meObj);  //Object { age: 19, name: "cheesekun"}
console.log(meObj.name);  //"cheesekun"

Web Storage 存储事件

当localStorage或者sessionStorage的数据发生变化的时候,浏览器都会在其他对该数据可见的窗口对象上触发storage事件(本窗口除外)。

重要:只有当存储数据真正发生变化时才会触发存储事件,比如给一个item重新设置一个和原来一样的value,或者是删除一个不存在的item是不会触发存储事件的。

  • StorageEvent的几个属性:

    key:item的key,没有则为null
    newValue: item的新值,没有则为null
    oldValue: item的旧值,没有则为null
    storageArea: sessionStorage或者localStorage
    url: 触发存储事件的脚本所在文档的url

window.addEventListener('storage', function(e) {
    console.log(e.key, e.oldValue, e.newValue, e.storageArea, e.url);
}, false);

localStorage小例子

输入内容,save
然后刷新页面
surprise!!! 它是不是还在(。・ω・。)ノ♡
关闭页面,再打开
surprise!!! sessionStorage是不是消失了(ノ゚▽゚)ノ


    结语

    花了一整天研究这玩意,还有个Cookie没去了解,有机会再看吧

     苦しい時でも、とにかく笑っている
     再难熬的日子,也要笑对人生

    参考文献:

    https://aximario.github.io/2016/12/15/web-storage/?utm_source=caibaojian.com
    http://www.cnblogs.com/st-leslie/p/5617130.html
    https://developer.mozilla.org/zh-CN/docs/Web/API/Storage