Html5 LocalStorage & SessionStorage 简介

创作人 Leo


编辑时间 Wed Jan 1,2020 at 10:13


Html5 LocalStorage & SessionStorage 简介

简介

localStorage 类似cookie,用户关闭浏览器不会消失

sessionStorage 类似session,用户关闭浏览器会清除

为什么用 XXSTORAGE : 以前如果有数据需要保存到客户端需要使用cookie,但是cookie有大小限制,而一般浏览器实现 storage 给的最大限制是10M

由于是新API,使用时最好封装一层,如果发现有浏览器不兼容问题,直接替换掉

设置一个值 1. localStorage.name = ‘lx’ ;

  1. localStorage.setItem(‘name’, ‘lx’) ;

获取一个值 1. var username = localStorage.name ;

  1. var username = localStorage.getItem(‘name’) ;

当值不存在时

localStorage.name 为 undefined

localStorage.getItem(‘name’) 为字符串 null

使用

dbutil.js

/**
 * 保存到数据库
 * @param key
 * @param value
 */
function db_set(key, value){
    localStorage.setItem(key, value) ;
}
/**
 * 获取一个值
 * @param key
 * @returns
 */
function db_get(key){
    //return localStorage.getItem('name') ;
    return localStorage.name;
}

set.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>Insert title here</title>
</head>
<body>
<input type="text" name="uname" > <button id="submit">提交</button>
<script type="text/javascript" src="dbutil.js" ></script>
<script type="text/javascript">
 
var db_name = db_get('name');
if(db_name){
    document.getElementsByName('uname')[0].value = db_name ;
}
 
document.getElementById('submit').onclick = function(){
    var name = document.getElementsByName('uname')[0].value ;
    console.log(name);
    db_set('name', name) ;
    window.location.href= 'get.html' ;
}
 
 
</script>
</body>
</html>


get.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>Insert title here</title>
</head>
<body>
<a href="set.html">&lt;&lt;返回</a> <div id="show"></div>
<script type="text/javascript" src="dbutil.js" ></script>
<script type="text/javascript">
var name = db_get('name') ;
if(name){
    document.getElementById('show').innerHTML = name ;
}else{
    console.log('name is null');
}
</script>
</body>
</html>



阅读:27
搜索
  • Linux 高性能网络编程库 Libevent 简介和示例 1884
  • Mac系统编译PHP7【20190929更新】 1727
  • Windows 安装Swoole 1538
  • Hadoop 高可用集群搭建 (Hadoop HA) 1423
  • Hadoop 高可用YARN 配置 1339
  • 小白鼠问题 1245
  • Hadoop Map Reduce 案例:好友推荐 1222
  • 自动化测试工具 Selenium 1085
  • GIT 分支管理 998
  • 一致性哈希算法说明及PHP示例 959
简介
不定期分享软件开发经验,生活经验