js---- localStorage的基本用法
<body> <div> <span>用户名</span> <input type="text" class='username'> </div> <div> <span>密码</span> <input type="password" class='password'> </div> <input type="checkbox" class='check'><button>登录</button> </body> <script> var text = document.getElementsByClassName('username')[0]; var pas = document.getElementsByClassName('password')[0]; var check = document.getElementsByClassName('check')[0]; var button = document.getElementsByTagName('button')[0]; // 点击 登录按钮 button.onclick = function (){ // 如果复选框选中的话,把username 和password 保存起来、 if(check.checked){ localStorage.setItem('username',text.value); localStorage.setItem('password',pas.value); // 如果没有选中的话,就不保存 }else{ localStorage.clear(); } } // 当再次打开页面的时候 会获取页面的webstorage window.onload = function(){ text.value = localStorage.getItem('username') pas.value = localStorage.getItem('password') } </script>
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
sessionStorage
容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止
localStorage
容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除。
注意点:只能存储字符串,如果是json对象的话,可以将对象JSON.stringify() 编码后存储