webStorage之localStorage和sessionStorage

墨蓝 2024-03-30 14:06 54阅读 0赞

#### 文章目录 ####

*  webStorage之localStorage和sessionStorage
 *   *  1. localStorage和sessionStorage相关说明：
     *  2. 使用实例：
     *   *  2-1 4个Api之setItem，getItem，removeItem，clear
         *   *  localStorage和sessionStorage是以字符串格式存储到本地的
         *  2-2 实际项目中可能会出现需要存储数组或者是对象，使用JSON格式转换；

## webStorage之localStorage和sessionStorage ##

### 1. localStorage和sessionStorage相关说明： ###

这两个Storage是HTML5新增加的，使用频繁，在客户端以键值对的形式存储。
    共同点：
    	都是存储在客户端也就是浏览器，存储的数据大小是5M左右，有时视浏览器决定。
    	比cookie的4K大了很多。
    不同点：
    	存储的时间不一样。
    localStorage生命周期可以说是永久，除了主动执行api清除或手动清除浏览器缓存以外，一直在客户端；
    sessionStorage生命周期和当前页面有关，关闭当前页面或者是关闭浏览器，数据就被清除掉。
    
    具体用法：
    	两个的用法基本一致，具体就是保存到本地、从本地取出来、删除存储的数据、清除全部。
    # 存放数据
    	xxxStorage.setItem('name','张三');
    # 获取数据	
    	xxxStorage.getItem('name');
    # 移除单个数据	
    	xxxStorage.removeItem('name');
    # 移除所有数据	
     	xxxStorage.clear();

### 2. 使用实例： ###

#### 2-1 4个Api之setItem，getItem，removeItem，clear ####

##### localStorage和sessionStorage是以字符串格式存储到本地的 #####

// 2-1 localStorage的用法
    
    //保存到本地,第一个参数是变量名，第二个是值
    localStorage.setItem('name','张三');
    //从本地取出，只有一个参数，存储的变量名
    localStorage.getItem('name');
    //删除某一个存储的数据
    localStorage.removeItem('name');
    //清除所有的数据
    localStorage.clear();
    
    // 2-2 sessionStorage的用法，参考localStorage的用法
    sessionStorage.setItem('name','李四');
    sessionStorage.getItem('name');
    sessionStorage.removeItem('name');
    sessionStorage.clear();

#### 2-2 实际项目中可能会出现需要存储数组或者是对象，使用JSON格式转换； ####

//保存  JSON.stringify 
    setStorage(key,value){
        
        localStorage.setItem(key,JSON.stringify(value))
    };
    //取出 JSON.parse()
    getStorage(key){
        
        return JSON.parse(localStorage.getItem(key))
    };