精华内容
参与话题
问答
  • H5----本地存储

    2018-11-22 16:04:05
    1、localStorage:本地存储 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。属性是只读的。localStorage 只支持 string 类型的存储,这里要特别说明一下 localStorage 的使用也是遵循同源...

    1、localStorage:本地存储

    用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。属性是只读的。localStorage 只支持 string 类型的存储,这里要特别说明一下 localStorage 的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的 localStorage。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function change() {
                var time=new Date().getTime();
    //            本地存储设置 键值对
                localStorage.setItem(time.toLocaleString(),txt.value);
    //          打印存储的长度
                console.log(localStorage.length);
                show()
            }
            function show() {
    //            拼接table标签
                var result="<table border='1'>";
                for(var i=0;i<localStorage.length;i++){
    //                拼接tr、td标签.  通过localStorage.key(index)取key,localStorage.getItem(key)取值
                    result+="<tr><td>"+localStorage.key(i)+"</td><td>"+localStorage.getItem(localStorage.key(i))+"</td></tr>";
                }
                result+="</table>";
                div1.innerHTML=result;
            }
            function del() {
                var c=localStorage.length;
                for (var i=0;i<c;i++){
                    //localStorage.removeItem(key)  删除一个元素
                    localStorage.removeItem(localStorage.key(i));
                    console.log(i);
                }
    //            清空数据库,不删除表结构
    //            localStorage.clear();
                div1.innerHTML="";
            }
        </script>
    </head>
    <body>
    <textarea id="txt" cols="100" rows="30"></textarea><br><br>
    <input type="button" onclick="change()" value="添加">
    <input type="button" onclick="del()" value="删除">
    <div id="div1"></div>
    </body>
    </html>

    (2)、小项目-----获取用户信息

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function save() {
    //            创建一个json对象
                var data=new Object();
                data.name=uname.value;
                data.email=uemail.value;
                data.tel=utel.value;
                data.memo=umemo.value;
    //            json对象转化成json字符串
                var str=JSON.stringify(data);
    //            按照用户名存
                localStorage.setItem(uname.value,str);
            }
            function find() {
    //            将查找的用户信息解析
                var data=JSON.parse(localStorage.getItem(findu.value));
                var result ="姓名:"+data.name+"<br>"+"Email:"+data.email+"<br>"+"电话号码:"+data.tel+"<br>"+"备注:"+data.memo;
                msg.innerHTML=result;
            }
        </script>
    </head>
    <body>
    <h1>用户信息卡</h1>
    <table>
        <tr><td>姓名</td><td><input type="text" id="uname"></td></tr>
        <tr><td>Email</td><td><input type="text" id="uemail"></td></tr>
        <tr><td>电话号码</td><td><input type="text" id="utel"></td></tr>
        <tr><td>备注</td><td><input type="text" id="umemo"></td></tr>
        <tr><td><input type="button" value="保存" onclick="save()"></td></tr>
    </table>
    <hr/>
    <p>查询:<input id="findu">
        <input type="button" value="按姓名查询" onclick="find()">
    <p id="msg"></p>
    </body>
    </html>

    ※:前端获取到值后用Json字符串打包给后台,后台拿到解析,进行设置。

    2、Web Sql

    1. openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
    2. transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
    3. executeSql:这个方法用于执行实际的 SQL 查询。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
    //     创建一个数据库(数据库名,版本号,描述数据库,大小,回调方法[都没括号],最好写上)
            var db=openDatabase("student","1.0","学生表",1024*1024,success);
            function success() {
                alert("创建成功");
            }
            function fault() {
                alert("创建失败");
            }
            function select1() {
                db.transaction(function (tx) {
    //            tx.executeSql("create table stu(id,name,age);",[]);
    //                执行sql语句
                tx.executeSql("insert into stu(id,name,age) values(?,?,?);",[2,"vn",18]);
                    var result = "";
                                //        成功后返回一个rs结果集
                    tx.executeSql("select * from stu;", [], function (tx, rs) {
                        // rs.rows.length 获取返回结果的行数的长度
                        for (var i = 0; i < rs.rows.length; i++) {
                            //  rs.rows.item(index).name   通过index获取当前元素  
                            result += rs.rows.item(i).name+"<br>";
                        }
                        div1.innerHTML = result;
                    })
                });
            }
            function upd() {
                db.transaction(function (tx) {
                    //  ?代表占位符 ,后面[按顺序写参数],后面跟成功后的方法                
                    tx.executeSql("update stu set id=? where name=?",[3,"vn"],alert("ok"));
                });
            }
            function del() {
                db.transaction(function (tx) {
                    tx.executeSql("delete from stu where id=?",[3],alert("ok"));
                })
            }
        </script>
    </head>
    <body>
    <input type="button" value="查询" onclick="select1()">
    <input type="button" value="update" onclick="upd()">
    <input type="button" value="del" onclick="del()">
    <div id="div1"></div>
    </body>
    </html>

    一个web_sql的小项目:https://download.csdn.net/download/weixin_41678001/10801007

    展开全文
  • h5 本地存储

    2019-05-28 15:08:55
    <!... <... <...本地存</title> <meta charset="utf-8"> </head> <body> H5为了规范; 以前就是cookies,session localStorage: 1.永久生效;除非手动删除掉; ...
    <!DOCTYPE html>
    <html>
    <head>
    	<title>本地存</title>
    	<meta charset="utf-8">
    </head>
    <body>
    	H5为了规范;
    	以前就是cookies,session
    	localStorage:
    	1.永久生效;除非手动删除掉;
    	2.多窗口共享;
    	3.容量大约20M;
    	window.localStorage.setItem(key,value)//设置内容;
    	window.localStorage.getItem(key);获取;
    	window.localStorage.removeItem(key);删除;
    	window.localStorage.clear();清空
    	sessionStorage:
    	1.生命周期为当前浏览器窗口;
    	2.可以在同一个窗口下访问;
    	3.容量大约为5M;
    	window.sessionStorage.setItem(key,value)//设置内容;
    	window.sessionStorage.getItem(key);获取;
    	window.sessionStorage.removeItem(key);删除;
    	window.sessionStorage.clear();清空
    </body>
    <script type="text/javascript">
    	window.localStorage.setItem(key,value)//设置内容;
    	window.localStorage.getItem(key);获取;
    	window.localStorage.removeItem(key);删除;
    	window.localStorage.clear();清空
    </script>
    </html>
    
    展开全文
  • 最新js 增加localstorage对象,用户存储永久存储的Web端的数据。...localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。 (1)setltem(key,value);添加本地存储数据。 (2)getltem(key):通过key获取相

    最新js 增加localstorage对象,用户存储永久存储的Web端的数据。数据不会随着Http请求发送到后台服务器,而且存储数据的大小机会不用考虑,因为在HTML5的标准中要求浏览器至少要支持到4MB。
    localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
    (1)setltem(key,value);添加本地存储数据。
    (2)getltem(key):通过key获取相应的value。
    (3)removeltem(key):通过key删除本地数据
    (4)clear():清空数据。

    /***代码示例***/
    <script type="text/javascript">
            //添加key-value 数据到 sessionStorage
            localStorage.setItem("demokey", "http://blog.itjeek.com");
            //通过key来获取value
            var dt = localStorage.getItem("demokey");
            alert(dt);
            //清空所有的key-value数据。
            //localStorage.clear();
            alert(localStorage.length);
        </script>
    展开全文
  • h5本地存储

    千次阅读 2018-07-24 11:08:32
    Web Storage分为两种:    sessionStorage    localStorage  ...而localStorage则一直将数据保存在客户端本地;  保存数据:localStorage.setItem(key,value);  读取数据:localStorage....

    Web Storage分为两种: 

     

    sessionStorage 

     

    localStorage 

    从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地; 

    保存数据:localStorage.setItem(key,value); 
    读取数据:localStorage.getItem(key); 
    删除单个数据:localStorage.removeItem(key); 
    删除所有数据:localStorage.clear(); 
    得到某个索引的key:localStorage.key(index); 

    sessionStorage 同上

    sessionStorage.setItem(key,value); 

    key表示值

    value表示想存的东西

    var myname="本地存储"

    sessionStorage.setItem("name",myname);

    json存的时候用

    JSON.stringify()//将JSON对象转化成字符串

    取得时候用

    JSON.parse()//把字符串转换成JSON对象

     

    展开全文
  • H5本地存储和本地数据库

    千次阅读 2018-04-19 15:40:02
    在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简,想存储复杂的、关系型的用户...
  • H5本地存储

    2019-01-18 10:03:08
    cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂, window.localStorage和window.sessionStorage 容量较大:localStorage约20M,sessionStorage约5M localStorage永久生效,除非手动删除...
  • H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL。不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多,请耐心阅读。 一、Web Storage...
  • H5本地存储大小

    千次阅读 2016-06-08 15:21:55
    H5本地存储大小说明 localStorage(本地存储)可以长期存储数据,没有时间限制,数据都可以使用。除非清除本地缓存localStorage,之后就无法使用 sessionStorage(会话存储),只有在浏览器被关闭之前使用,只存在...
  • H5存储

    2017-11-30 22:11:54
    关于存储 之前了解的存储有数据库、cache、磁盘文件、内存 H5之前浏览器端的存储用的几乎都是cookies,它有几个特点: http请求头中携带(感觉...大小限定4K 主Domain污染 还有一些安全问题 ...H5存储的优点: ...H5存储
  • 基于JSON的H5本地存储

    2017-01-09 16:27:25
    基于JSON的H5本地存储,提供一套简易、强大的API,几乎不需要学习即可直接使用
  • 1.H5本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
  • h5 本地存储参考

    2018-02-28 11:34:52
    http://blog.csdn.net/a727911438/article/details/54290931
  • h5-本地存储 HTML5提供了两种在客户端存储数据的新方法 面试 localStorage 1、本地存储,只要不主动删除,永久存储2、存储量可以是无限的,只要本地空间足够大3、可以设置数据共享 sessionStorage1、本地存储,...
  • H5 本地存储

    2019-09-27 07:01:02
    h5本地存储的操作 // 存储localStorage export const setStorage = (name, value) => { if (!name) return; if (typeof value !== 'string') { value = JSON.stringify(value) } wi...
  • H5本地存储之存储JSON格式数据

    千次阅读 2017-05-02 23:35:29
    1.通常在页面中存储用户信息包含很多数据,比如:账号、昵称、年龄等,可以将每个数据进行单独存储sessionStorage.setItem(paramname,paramvalue);2.不过这样保存起来太麻烦,我们可以直接将其封装成一个对象来保存...
  • sessionStorage是临时存储,页面关闭,本地存储消失,且多个窗口不共享数据 localStorage是永久存储在本地(可以手动删除数据),且多个窗口可共享数据
  • 本地存储与会话存储介绍 1.本地存储(localStorage)和会话存储(sessionStorage)是HTML5的Web存储提供的客户端存储技术. 2.会话存储(sessionStorage),顾名思义"对话过程中的数据", 数据是存在会话过程,会话结束数据也...
  • h5存储的几种方式

    千次阅读 2016-07-30 19:13:27
    1.本地存储-localStorage、sessionStorage 2.webSQL、indexeddb 3.html5离线存储 详细教程请看:http://www.imooc.com/learn/104 以下是我整理的一些方便自己用的方法和概念:  //cookie是有大小和数量限制的:...
  • H5新特性 - 本地存储

    2020-02-04 21:50:58
    本地存储 注意: 本地存储调用者必须统一,用临时存储存储的数据,只有临时存储才能找到 localStorage 永久存储(相对),其中的数据不随着浏览器的开关而改变 sessionStorage 临时存储(相对),当浏览器关闭/当前...
  • H5本地存储技术

    2020-05-17 08:56:48
    H5本地存储技术 1、sessionStorage(会话存储) -生命周期:浏览器打开到关闭的过程 -大小: 5M -保存的位置:浏览器端 -setItem(‘key’,value) -getItem(‘key’) -removeItem(‘key’) 2、localStorage(永久存储) -...
  • localStorage.setItem("bookList_","111") console.log("请求后钱", localStorage.getItem("bookList_")) var bookList_ //获取所有的数据 this.apis.adminApi.bookList({thisPage,totalPagesDate}).then((res)...
  • H5数据存储

    2019-06-05 21:07:38
    早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. HTML5 Web 存储 ...
  • sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。当用户...

空空如也

1 2 3 4 5 ... 20
收藏数 33,347
精华内容 13,338
关键字:

h5本地存储