本地存储LocalStorage

2017-11-16

本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，下面是最基础的用法

localStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名<input type="text" id="ursename"> </br>
密码  <input type="text" id="password"> </br>
<input id="chk" type="checkbox">
<lable for="chk">自动登录</lable>
</body>
<script>
    //localStorage.getItem('')获取要存储的值
    $('#chk').click(function(){
        if(this.checked){
            //将值存储在本地
            localStorage.setItem('names', $("#ursename").val());
            localStorage.setItem(('pass'),$('#password').val());
//          alert(localStorage.getItem('names'));
//          alert(localStorage.getItem('pass'))
        }else{
            //在本地删除存储
            localStorage.removeItem('names');
            localStorage.removeItem('pass');
            // console.log(localStorage.getItem('names'))
        }
    })
    if(localStorage.getItem('names')&&localStorage.getItem('pass')){
        $('#ursename').val(localStorage.getItem('names'));
        $('#password').val(localStorage.getItem('pass'));
        $('#chk').prop("checked",true);
    }
</script>
</body>
</html>

sessionStorage和localStorage用法相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jQuery/jquery-3.0.0.min.js"></script>
</head>
<body>
<br>
标题 <input type="text" id="title" ></br></br>
内容 <textarea id="content" cols='100' rows="12"></textarea>
</br></br>
<a href="www.baidu.com" id="login">跳转页面</a>
</body>
<script>
    $('#login').click(function(){
        sessionStorage.setItem('title',$('#title').val());
        sessionStorage.setItem('content',$('#content').val())
    });
    if(sessionStorage.getItem('title')&&sessionStorage.getItem('content')){
        $('#title').val(sessionStorage.getItem('title'));
        $('#content').val(sessionStorage.getItem('content'));
    }
</script>
</html>

注意 html5本地存储localStorage 存储json对象存储格式问题

localStorage.setItem(arr)会自动将arr存储成字符串形式，如：

1
2
3

var arr=[1,2,3];localStorage.setItem("temp",arr);
//会返回StringlocalStorage.getItem("temp");会返回1,2,3
typeof localStorage.getItem("temp");

localStorage.setItem()却不会自动将Json对象转成字符串形式，如：

1 2	var obj={"a":1,"b":2];localStorage.setItem("temp2",obj); typeof localStorage.getItem("temp2");返回[object Object]

正确存储json对象方法,存储前先用JSON.stringify()方法将json对象转换成字符串

var obj={"a":1,"b":2};
obj=JSON.stringify(obj);
localStorage.setItem("temp2",obj);
typeof localStorage.getItem("temp2")返回字符串格式：{"a":1,"b":2}

后续要操作该json对象，先将之前存储的json字符串先转成json对象再进行操作
1
obj=JSON.parse(localStorage.getItem("temp2"));