精华内容
下载资源
问答
  • h5本地存储
    千次阅读
    2020-11-05 09:29:39

    一 H5本地存储 Storage(组数)
    ·ps:本地存储是存在用户的浏览器中
    1.大小:最小为5MB,可以申请更大的空间
    2.不会随HTTP请求发送给服务器
    3.操作简单
    4.移动端普及高
    分为:localStorage与sessionStorage两种

    二 localStorage
    1.认识
    localStorage为永久性保存数据,不会随着浏览器的关闭而消失,可以在同域名跨页访问。

    2.检测
    window.localStorage 为如果存在,说明浏览器支持 ,如果不存在说明浏览器版本太低.
    3.操作

    1)设置 localStorage.setItem(‘键’,’值’); 设置相同键时会覆盖原来的值
    2)读取 localStorage.getItem(‘键’); 读取键对应的值
    3)查看长度 localStorage.length(); 查看Storage中的全部长度
    4)查看键 localStorage.key(‘下标’) 查看下标中对应的键
    5)删除 localStorage.removeItem(‘键’): 删除指定键与对应的值
    6)清除 localStorage.clear(); 清楚前面域名中所有的localStorage

    4.存储类型:

    Storage只能存储字符串,但如果需要存储数组与对象类型时,需要先把数组或对象转换为字符串在去写入到storage中,在读取时在把字符串转换为json对象

    JSON.stringify(数组或对象) 把数组与对象转换为json字符串

    JSON.parse(json字符串) 把json字符串转换为json对象

    5.Storage事件
    当同源下的localStorage与sessionStorage中的数据被修改删除除时,会触发storage事件,但这事件与传统事件不同, 需要在同源下的其它页面改变数据时, 另外页面的事件才会被触发, 同时需要用监听方式才可以绑定
    window.addEventListener(“storage”, function(e) {
    console.log(‘sssss’);
    one.style.background = ‘red’;
    });

    6.storage事件中对应的属性,需要用event调用

    key 设置或删除或修改的键。调用clear()时,则为null。
    oldValue 改变之前的旧值。如果是新增元素,则为null。
    newValue 改变之后的新值。如果是删除元素,则为null。
    url 触发这个改变事件的页面的URL

    更多相关内容
  • H5本地存储

    2022-08-08 19:37:19
    本地存储是指把数据存储在浏览器中的localStorage和sessionStarage上。按下F12进入浏览器检查,选择Application即可看到浏览器本地存储。localStorage和sessionStarage都是以Key-value的方式保存格式为字符串的数据...

    本地存储是指把数据存储在浏览器中的localStorage和sessionStarage上。按下F12进入浏览器检查,选择Application即可看到浏览器本地存储。localStorage和sessionStarage都是以Key-value的方式保存格式为字符串的数据。

    localstorage永久储存,关闭浏览器也不消失,而sessionStorage则是临时存储,关闭浏览器就消失了。本地存储操作通常配合jsonAPI来使用

    本地存储的操作:

    1.给localstorage添加数据:

    <script>
            localStorage.setItem('name','chaoxip')
    
            // 参数不能为对象,否则不能正确存储
            localStorage.setItem('message',{age:23,gender:'male'})
    
            // 若参数为对象,则需要转为字符串
            localStorage.setItem('message2',JSON.stringify({age:23,gender:'male'}))
    
        </script>

    运行结果如下:

    给本地存储传入对象将调用对象的tostring方法,无法存储预期的数据

    2.获取数据

    let result = localStorage.getItem('message2')
            console.log(result);

    结果如下:

     3.修改数据

    修改数据的方式是使用setItem()方法,设置为同一个key即可

    4.删除数据

    删除指定数据的方法为localStorage.removeItem('key')

    删除全部数据的方法为localStorage.clea()

    展开全文
  • 主要介绍了详解H5本地储存Web Storage的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于JSON的H5本地存储

    2017-01-09 16:27:25
    基于JSON的H5本地存储,提供一套简易、强大的API,几乎不需要学习即可直接使用
  • H5本地存储

    2022-05-24 15:34:49
    H5本地存储 本地存储:通过浏览器访问服务器的时候,一部分数据存在服务器,一部分数据存在浏览器,存在浏览器时,我们就用到了本地存储,也就是客服端数据的存储; 本地存储可以使用在哪里? 比如用户的临时登录...

    H5的本地存储

    本地存储:通过浏览器访问服务器的时候,一部分数据存在服务器,一部分数据存在浏览器,存在浏览器时,我们就用到了本地存储,也就是客服端数据的存储;

    本地存储可以使用在哪里?
    比如用户的临时登录信息,用户页面配置,当前临时信息;一些东西用户想要存起来,方面下次访问时继续使用,但是服务器没有必要浪费空间来存储这些信息,此时就可以应用本地存储,存放在用户本地

    本地存储的方式:

    cookie:最多只能存储4kb大小的数据,每次http请求都会被传回服务器;在其设置的过期时间之前有效;在所有同源窗口可以共享;

    web storage:最多存储5mb大小的数据,key-value的方式存储数据,包含两种方式:local storage 和 session storage 两者的区别在于存储数据的时间,前者在浏览器关闭时不会被清空,除非手动清除;后者在浏览器关闭也就是会话结束时数据自动消失;

    API:

    storage.length 只读 :返回一个整数,表示存了多少条数据

    storage.key(n) n作为参数,返回第n个键名

    storage.getItem() 接受一个键名作为参数,返回键名对应的值

    storage.setItem() 接受一个键名和值作为参数,把此键名和值添加到存储当中,如果键名已经存在,更新键名的值

    storage.removeItem() 接受键名参数,删除此项数据

    storage.clear() 清除存储中的所有数据

    web storage 存储的数据不能跨浏览器;不能跨域;还支持事件同之机制,可以将数据更新的通知发送给监听者;

    localstorage可以在同一个域下多个页面使用;sessionstorage只能在同一个域下的同一个页面使用

    web storage的好处:
    1、将数据保存在本地,减少不必要的网络请求

    2、快速显示数据:从本地获取数据比通过网络从服务器获取数据,速度更快,效率更高,页面显示也更快;

    3、不影响网络效能:因为webstorage的数据只存储在客户端的浏览器,不会占用频带

    展开全文
  • h5 本地存储

    2020-08-09 09:16:56
    Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过...

    Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。
    方法:
    • getLength: 获取应用存储区中保存的键值对的个数
    • getItem: 通过键(key)检索获取应用存储的值
    • setItem: 修改或添加键值(key-value)对数据到应用数据存储中
    • removeItem: 通过key值删除键值对存储的数据
    • clear: 清除应用所有的键值对存储数据
    • key: 获取键值对中指定索引值的key值
    权限:
    5+功能模块(permissions)

    {
    // ...
    "permissions":{
    	// ...
    	"Storage": {
    		"description": "本地存储,访问应用本地存储数据"
    	}
    }
    }
    			
    getLength
    获取应用存储区中保存的键值对的个数
    
    var foo = plus.storage.getLength();
    

    参数:

    返回值:
    Number : 键值对的个数
    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Storage Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    document.addEventListener("plusready",plusReady,false);
    // Get storage item length
    function storageCount() {
    	return plus.storage.getLength();
    }
    	</script>
    	</head>
    	<body>
    		获取应用存储区中保存的键值对的个数<br/>
    		<button onclick="storageCount()">Count</button>
    	</body>
    </html>
    

    getItem
    通过键(key)检索获取应用存储的值

    var foo = plus.storage.getItem(key);

    参数:
    • key: ( DOMString ) 必选
    存储的键值
    返回值:
    DOMString : 键(key)对应应用存储的值,如果没有保存则返回null。
    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Storage Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    document.addEventListener("plusready",plusReady,false);
    // Get storage item value
    function getStorage() {
    	return plus.storage.getItem("test");
    }
    	</script>
    	</head>
    	<body>
    		获取应用存储区中保存的键值对的个数<br/>
    		<button onclick="alert(getStorage())">Get item(test)</button>
    	</body>
    </html>
    

    setItem
    修改或添加键值(key-value)对数据到应用数据存储中

    void plus.storage.setItem(key, value);

    说明:
    如果设置的键在应用数据存储中已经存在,更新存储的键值。 存储的键和值没有容量限制,但过多的数据量会导致效率降低,建议单个键值数据不要超过10Kb。
    参数:
    • key: ( DOMString ) 必选
    存储的键值
    • value: ( DOMString ) 必选
    存储的内容
    返回值:
    void : 无
    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Storage Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    document.addEventListener("plusready",plusReady,false);
    // Remove storage item
    function setStorage() {
    	plus.storage.setItem("test","test with hbuilder!");
    }
    	</script>
    	</head>
    	<body>
    		修改或添加键值(key-value)对数据到应用数据存储中<br/>
    		<button onclick="setStorage()">Set item(test)</button>
    	</body>
    </html>
    

    removeItem
    通过key值删除键值对存储的数据

    void plus.storage.removeItem(key);

    参数:
    • key: ( DOMString ) 必选
    存储的键值
    返回值:
    void : 无
    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Storage Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    document.addEventListener("plusready",plusReady,false);
    // Remove storage item
    function removeStorage() {
    	plus.storage.removeItem("test");
    }
    	</script>
    	</head>
    	<body>
    		清除应用所有的键值对存储数据<br/>
    		<button onclick="removeStorage()">Remove item(test)</button>
    	</body>
    </html>
    				
    clear
    清除应用所有的键值对存储数据
    
    void plus.storage.clear();
    

    参数:

    返回值:
    void : 无
    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Storage Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    document.addEventListener("plusready",plusReady,false);
    // Clear storage data
    function clearStorage() {
    	plus.storage.clear();
    }
    	</script>
    	</head>
    	<body>
    		清除应用所有的键值对存储数据<br/>
    		<button onclick="clearStorage()">Clear</button>
    	</body>
    </html>
    

    key
    获取键值对中指定索引值的key值

    var foo = plus.storage.key(index);

    参数:
    • index: ( Number ) 必选 存储键值的索引
    返回值:
    void : 无
    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Storage Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    document.addEventListener("plusready",plusReady,false);
    // Get value by index
    function enumValueByIndex() {
    	var keyNames=[];
    	var values=[];
    	var numKeys=plus.storage.getLength();
    	for(var i=0; i<numKeys; i++) {
    		keyNames[i] = plus.storage.key(i);
    		values[i] = plus.storage.getItem(keyNames[i]);
    	}
    }
    	</script>
    	</head>
    	<body>
    		获取键值对中指定索引值的key值<br/>
    		<button onclick="enumValueByIndex()">Enum</button>
    	</body>
    </html>
    		
    
    展开全文
  • H5 本地存储

    2020-05-17 12:18:38
    1. localStorage 本地存储 本地存储 就是把数据存储在浏览器端 本地存储的方法 : 保存数据 localStorage.setItem(属性名字符串,属性值) // 保存数据 document.getElementById("btn1").onclick = function () { /...
  • h5 本地存储参考

    2018-02-28 11:34:52
    http://blog.csdn.net/a727911438/article/details/54290931
  • h5本地存储

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

    千次阅读 2016-06-08 15:21:55
    H5本地存储大小说明 localStorage(本地存储)可以长期存储数据,没有时间限制,数据都可以使用。除非清除本地缓存localStorage,之后就无法使用 sessionStorage(会话存储),只有在浏览器被关闭之前使用,只存在...
  • 本地存储与会话存储介绍 1.本地存储(localStorage)和会话存储(sessionStorage)是HTML5的Web存储提供的客户端存储技术. 2.会话存储(sessionStorage),顾名思义"对话过程中的数据", 数据是存在会话过程,会话结束数据也...
  • 关于H5本地存储的内容,登录、注册案例可以很好的运用到相关的内容,此案例掌握的熟练,就可以很好的理解本地存储的内容啦!本文就详细的讲解了登录注册相关的业务逻辑、以及相关页面的源码!
  • 1.H5本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
  • 可以实现简单的本地储存,刷新了页面数据不会丢失 1、HTML代码如下: <body onload="loadAll()"> <div class="addDiv"> <label for="user_name">姓名:</label> <input type="text" id...
  • 把localStorage跟cookieStorage封装起来,当客户端不兼容H5本地存储时可自动切换成Cookie存储
  • 微信浏览器H5 localStorage 无效 无效的: let data = JSON.stringify({}) // JS对象转JSON localStorage.setItem('data', data) JSON.parse(localStorage.getItem('data')) // parse JSON转js对象 生效的: ...
  • 手动利用h5本地存储实现vuex的永久存储
  • 本地存储特性 数据都保存在客户端,不与服务器进行交互通信 设置、读取方便,刷新数据不会消失 容量较大,localStorage和sessionStorage的存储数据大小一般都是:5MB 只能存储字符串,可以将对象JSON.stringfy() ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,281
精华内容 7,712
关键字:

h5本地存储