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

骑猪看日落 2022-12-10 10:07 76阅读 0赞

## 如何使用 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");