如何使用 sessionStorage 和 localStorage 进行简单的数据存储与获取

如何使用 sessionStorage 和 localStorage 进行简单的数据存储与获取

localStorage和sessionStorage是Web提供的两种本地存储方式。
相比较cookie而言，localStorage和sessionStorage的存储大小很大，localStorage能够长期保存，sessionStorage在会话期间保存。

localStorage

1 . 设置 localStorage （setItem）：

      var localStorage = window.localStorage;
      // 想要存储的数据，这里是对象的形式
      var obj = {name:"zhangsan"}
      // setItem 进行设置 ，这里有一点就是要把对象转化成 json
      // data 表示你要存储值的 key 值，后面的参数是你要存储的 value 值
      localStorage.setItem("data", JSON.stringify(obj))

2 . 获取 localStorage （getItem）：

      // data 表示 你要获取缓存中 key 值为data的数据
      // 再将获取的数据进行赋值
      var site = localStorage.getItem("data");
      // 或者 ( var site = localStorage.data; )
      // 因为上一步将对象转化成了json，现在要转化回来
      // 看起来转化来回会很麻烦，如果不进行转化，就不能正确输出对象变量
      console.log(JSON.parse(site))

3 . 删除localStorage （removeItem）：

	  localStorage.removeItem("data");

sessionStorage

sessionStorage 同理

      // 这里只是用sessionStorage接一下window.sessionStorage
      var sessionStorage = window.sessionStorage;

      var obj = { name: "zhangsan" }
      sessionStorage.setItem("data", JSON.stringify(obj));
      
      var site = sessionStorage.getItem("data");
      // var site = sessionStorage.data;
      console.log(JSON.parse(site))

      sessionStorage.removeItem("index");