openjs

Appearance

本地数据存储 Data ​

基本使用 ​

显示代码
html
<div class="open-container open-container-fluid">
	<div class="open-col-4" style="margin: 20px 0;">
		<input class="open-input" type="text" id="timeInput" placeholder="请输入数据">
	</div>
	<div>
		<button class="open-btn" bg @click="saveTime">保存10秒</button>
		<button class="open-btn open-btn-primary" bg @click="getTime">获取数据</button>
	</div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { data } from '../public/openjs@0.1.0-beta.esm.js';

	// 保存数据key名
	let key = 'input';

	// 保存数据
	const save = function(){
		// 获取input输入框
		let input = document.querySelector("#input");
		// 判断输入值不能为空
		if(!input.value || input.vlaue == ''){
			alert("输入值不能为空！");
			return false;
		}
		// 保存数据
		data.set({
			key: key,
			val: input.value,
			click: function(res){
				// res.status值为true，保存成功
				if(res.status){
					alert("保存成功")
				}
			}
		})

		// 清空输入框
		input.value = "";
	}

	// 获取数据
	const get = function(){
		// 获取数据
		data.get({
			key: key,
			click: function(res){
				// res.status值为true，获取成功
				if(res.status){
					// res.data为值
					alert(res.message+":"+res.data)
				}else{
					alert(res.message);
				}
			}
		})
	}

	// 删除数据
	const remove = function(){
		// 删除数据
		data.remove({
			key: key,
			click: function(res){
				// res.status值为true，删除成功
				if(res.status){
					alert("删除成功")
				}else{
					alert("删除失败");
				}
			}
		})
	}

	// 删除所有数据
	const removeAll = function(){
		// 删除数据
		data.removeAll(function(res){
			// res.status值为true，删除成功
			if(res.status){
				alert(res.message)
			}else{
				alert(res.message);
			}
		})
	}
</script>
<div class="open-container open-container-fluid">
	<div class="open-col-4" style="margin: 20px 0;">
		<input class="open-input" type="text" id="timeInput" placeholder="请输入数据">
	</div>
	<div>
		<button class="open-btn" bg @click="saveTime">保存10秒</button>
		<button class="open-btn open-btn-primary" bg @click="getTime">获取数据</button>
	</div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { data } from '../public/openjs@0.1.0-beta.esm.js';

	// 保存数据key名
	let key = 'input';

	// 保存数据
	const save = function(){
		// 获取input输入框
		let input = document.querySelector("#input");
		// 判断输入值不能为空
		if(!input.value || input.vlaue == ''){
			alert("输入值不能为空！");
			return false;
		}
		// 保存数据
		data.set({
			key: key,
			val: input.value,
			click: function(res){
				// res.status值为true，保存成功
				if(res.status){
					alert("保存成功")
				}
			}
		})

		// 清空输入框
		input.value = "";
	}

	// 获取数据
	const get = function(){
		// 获取数据
		data.get({
			key: key,
			click: function(res){
				// res.status值为true，获取成功
				if(res.status){
					// res.data为值
					alert(res.message+":"+res.data)
				}else{
					alert(res.message);
				}
			}
		})
	}

	// 删除数据
	const remove = function(){
		// 删除数据
		data.remove({
			key: key,
			click: function(res){
				// res.status值为true，删除成功
				if(res.status){
					alert("删除成功")
				}else{
					alert("删除失败");
				}
			}
		})
	}

	// 删除所有数据
	const removeAll = function(){
		// 删除数据
		data.removeAll(function(res){
			// res.status值为true，删除成功
			if(res.status){
				alert(res.message)
			}else{
				alert(res.message);
			}
		})
	}
</script>

设置过期时间 ​

显示代码
html
<div class="open-container open-container-fluid">
	<div class="open-col-4" style="margin: 20px 0;">
		<input class="open-input" type="text" id="input" placeholder="请输入数据">
	</div>
	<div>
		<button class="open-btn" bg @click="save">保存数据</button>
		<button class="open-btn open-btn-primary" bg @click="get">获取数据</button>
		<button class="open-btn open-btn-warn" bg @click="remove">删除数据</button>
		<button class="open-btn open-btn-danger" bg @click="removeAll">删除所有数据</button>
	</div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { data } from '../public/openjs@0.1.0-beta.esm.js';

	// 保存数据key名
	let key = 'time';

	// 保存数据
	const saveTime = function(){
		// 获取input输入框
		let time = document.querySelector("#timeInput");

		// 判断输入值不能为空
		if(!time.value || time.vlaue == ''){
			alert("输入值不能为空！");
			return false;
		}
		// 保存数据
		data.set({
			key: key,
			val: time.value,
			exp: 10,
			click: function(res){
				// res.status值为true，保存成功
				if(res.status){
					alert("保存成功")
				}
			}
		})
		// 清空输入框
		time.value = "";
	}

	// 获取数据
	const getTime = function(){
		// 获取数据
		data.get({
			key: key,
			click: function(res){
				// res.status值为true，获取成功
				if(res.status){
					console.log(res.data)
					// res.data为值
					alert(res.message+":"+res.data)
				}else{
					alert(res.message);
				}
			}
		})
	}
</script>
<div class="open-container open-container-fluid">
	<div class="open-col-4" style="margin: 20px 0;">
		<input class="open-input" type="text" id="input" placeholder="请输入数据">
	</div>
	<div>
		<button class="open-btn" bg @click="save">保存数据</button>
		<button class="open-btn open-btn-primary" bg @click="get">获取数据</button>
		<button class="open-btn open-btn-warn" bg @click="remove">删除数据</button>
		<button class="open-btn open-btn-danger" bg @click="removeAll">删除所有数据</button>
	</div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { data } from '../public/openjs@0.1.0-beta.esm.js';

	// 保存数据key名
	let key = 'time';

	// 保存数据
	const saveTime = function(){
		// 获取input输入框
		let time = document.querySelector("#timeInput");

		// 判断输入值不能为空
		if(!time.value || time.vlaue == ''){
			alert("输入值不能为空！");
			return false;
		}
		// 保存数据
		data.set({
			key: key,
			val: time.value,
			exp: 10,
			click: function(res){
				// res.status值为true，保存成功
				if(res.status){
					alert("保存成功")
				}
			}
		})
		// 清空输入框
		time.value = "";
	}

	// 获取数据
	const getTime = function(){
		// 获取数据
		data.get({
			key: key,
			click: function(res){
				// res.status值为true，获取成功
				if(res.status){
					console.log(res.data)
					// res.data为值
					alert(res.message+":"+res.data)
				}else{
					alert(res.message);
				}
			}
		})
	}
</script>

API ​

API描述
data.set(options)设置数据
data.get(options)获取数据
data.remove(options)删除数据
data.removeAll(callback)删除全部数据

  • data.set(options) ​

options参数:基础属性配置

属性名描述类型必填默认值
options.key数据名string是-
options.value保存的数据值numberstringarray
options.exp过期时间：默认1代表1秒，如果设置时间类型，则对应1代表1小时或1天number否-
options.expType过期时间类型: s: 代表秒 | h:代表小时 | d: 代表天string否-
options.click回调函数function否-

options.click 回调函数

js
// 返回值
// res.status 状态
// res.message 信息
click: function(res){
	console.log(res)
}
// 返回值
// res.status 状态
// res.message 信息
click: function(res){
	console.log(res)
}

  • data.get(options) ​

options参数:基础属性配置

属性名描述类型必填默认值
options.key数据名string是-
options.click回调函数function否-

options.click 回调函数

js
// 返回值
// res.status 状态
// res.data 数据
// res.message 信息
click: function(res){
	console.log(res)
}
// 返回值
// res.status 状态
// res.data 数据
// res.message 信息
click: function(res){
	console.log(res)
}

  • data.remove(options) ​

options参数:基础属性配置

属性名描述类型必填默认值
options.key数据名string是-
options.click回调函数function否-

options.click 回调函数

js
// 返回值
// res.status 状态
// res.message 信息
click: function(res){
	console.log(res)
}
// 返回值
// res.status 状态
// res.message 信息
click: function(res){
	console.log(res)
}

  • data.removeAll(callback) ​

callback回调函数

js
// 返回值
// res.status 状态
// res.message 信息
data.removeAll(function(res){
	console.log(res)
})
// 返回值
// res.status 状态
// res.message 信息
data.removeAll(function(res){
	console.log(res)
})