天津WEB前端培训-localStorage的详细用法

localStorage的特点:

1.localStorage将数据存储在本地，可以直接获取，减少了客户端和服务器端的交互。

2.不参与和服务器的通讯，localStorage的值的类型限定为字符串类型。

3.数据对象没有过期时间。

sessionStorage与localStorage的区别:

localStorage属于永久性存储；sessionStorage属于临时性存储，存储的信息将随会话的结束而被清空。

同一浏览器中，相同的域名和端口下的不同页面中，localStorage的存储信息是可以共享的，sessionStorage的存储信息无法共享，仅适用于当前页面。

示例代码:

/*------代码示例------*/
<script type="text/javascript">
    //localStorage为长期缓存
    //添加缓存信息:
    let oneInfo = {
        name:"one",
        age:14,
        like:"sleep"
    };
    let twoInfo = {
        name:"two",
        age:6,
        like:"relax"
    };
    let threeInfo = {
        name:"three",
        age:23,
        like:"holiday"
    };
    let fourInfo = {
        name:"four",
        age:44,
        like:"rest"
    };
    
    //信息存入缓存前需转换为字符串类型:
    oneInfo = JSON.stringify(oneInfo);
    twoInfo = JSON.stringify(twoInfo);
    threeInfo = JSON.stringify(threeInfo);
    fourInfo = JSON.stringify(fourInfo);
    
    //setItem 把信息存入缓存:
    localStorage.setItem("INFO1",oneInfo);
    localStorage.setItem("INFO2",twoInfo);
    localStorage.setItem("INFO3",threeInfo);
    localStorage.setItem("INFO4",fourInfo);
    
    //getItem 通过key从缓存中获取信息
    let get1 = localStorage.getItem("INFO2");
    console.log(get1);
    
    //length 获取缓存中key的长度(数量)
    let len = localStorage.length;
    console.log(len);
    
    //key() 获取该位置的key
    let key = localStorage.key(3);
    console.log(key);
    
    //hasOwnProperty 查询是否存在该key
    let has = localStorage.hasOwnProperty("name");
    console.log(has);
    
    //removeItem 根据key值删除该条信息
    localStorage.removeItem("name");
    
    //clear 清除所有缓存信息
    localStorage.clear();

    //sessionStorage为会话缓存,函数及用法同localStorage

</script>