网站链接: 我爱捣鼓
当前位置: 首页 > 数据库  > SQL Server

本地存储字符串超过Cookie 4k大小限制如何解决?

2021/2/15 21:20:29

大家知道Cookie大小限制是4096B。如果需要存储的字符串超过Cookie大小限制怎么办?我们有2种方法来突破这个限制:WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。WebStorage两个主要目标:(1)提供一…

大家知道Cookie大小限制是4096B。如果需要存储的字符串超过Cookie大小限制怎么办?

我们有2种方法来突破这个限制:

WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。

WebStorage两个主要目标:(1)提供一种在cookie之外存储会话数据的路径。(2)提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储)。

1、LocalStorage

什么是localStorage?

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

localStorage 属性是只读的。

●localStorage的语法

//保存数据语法:

localStorage.setItem("key", "value");

//读取数据语法:

var lastname = localStorage.getItem("key");

//删除数据语法:

localStorage.removeItem("key");

●localStorage的使用

//将变量存到localStorage里

localStorage.setItem("JsonData", jsonStr);

//读取localStorage变量

var jsonData = JSON.parse(localStorage.getItem("JsonData"));

//删除localStorage的数据

localStorage.removeItem("JsonData");

//清空localStorage

localStorage.clear();

2、SessionStorage

SessionStorage和localStorage在使用方法上差不多,那他们有什么异同呢?

1、生命周期:localStorage:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

2、存储大小:localStorage和sessionStorage的存储数据大小一般都是:5MB

3、存储位置:localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。

4、存储内容类型:localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式:localStorage:window.localStorage;;sessionStorage:window.sessionStorage;。

6、应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;


WebStorage的优点:

(1)存储空间更大:cookie为4KB,而WebStorage是5MB;

(2)节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取,也不会像cookie一样美词请求都会传送到服务器,所以减少了客户端和服务器端的交互,节省了网络流量;

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage会非常方便;

(4)快速显示:有的数据存储在WebStorage上,再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多,所以速度更快;

(5)安全性:WebStorage不会随着HTTP header发送到服务器端,所以安全性相对于cookie来说比较高一些,不会担心截获,但是仍然存在伪造问题;

(6)WebStorage提供了一些方法,数据操作比cookie方便;

    setItem (key, value) ——  保存数据,以键值对的方式储存信息。

         getItem (key) ——  获取数据,将键值传入,即可获取到对应的value值。

          removeItem (key) ——  删除单个数据,根据键值移除对应的信息。

          clear () ——  删除所有的数据

          key (index) —— 获取某个索引的key


/* 合法uri */
export function validateURL(textval) {
 const urlregex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
 return urlregex.test(textval)
}
/* 小写字母 */
export function validateLowerCase(str) {
 const reg = /^[a-z]+$/
 return reg.test(str)
}
/* 大写字母 */
export function validateUpperCase(str) {
 const reg = /^[A-Z]+$/
 return reg.test(str)
}
/* 大小写字母 */
export function validateAlphabets(str) {
 const reg = /^[A-Za-z]+$/
 return reg.test(str)
}
/* 市场售价 */
export function validatePrice(str) {
 const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
 return reg.test(str)
}
/* 库存预警值 匹配非负整数(正整数 + 0) */
export function validatestockWarn(str) {
 const reg = /^(0|[1-9][0-9]*)$/
 return reg.test(str)
}
/* 比价网站 只验证京东和苏宁网站 */
export function validateCompareWebsite(str) {
 const reg = /^((https\:\/\/[0-9a-zA-Z\_]+\.|http\:\/\/[0-9a-zA-Z\_]+\.|https\:\/\/|http\:\/\/)|([0-9a-zA-Z\_]+\.){0,1})(jd|suning)\.(com$|com\/[\S]*)/i
 return reg.test(str)
}
/* 固定电话 */
export function validateTelephone(str) {
 const reg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
 return reg.test(str)
}
/* 手机号码 */
export function validatePhoneNumber(str) {
 const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
 return reg.test(str)
}
/* 手机号码和固定电话 */
export function validatePhTelNumber(str) {
 const reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/
 return reg.test(str)
}
/* 电子邮箱 */
export function validateEmail(str) {
 const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
 return reg.test(str)
}
/* 邮编 */
export function validateZipCode(str) {
 const reg = /^[1-9][0-9]{5}$/
 return reg.test(str)
}
/* 身份证 */
export function validateIDCard(str) {
 const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
 return reg.test(str)
}
/* 银行卡号 15位或者16位或者19位 */
export function validateBank(str) {
 const reg = /^([1-9]{1})(\d{14}|\d{18}|\d{15})$/
 return reg.test(str)
}
/* 纳税人识别码 */
export function validateTaxpayer(str) {
 const reg = /^([1-9]{1})(\d{14}|\d{18}|\d{15})$/
 return reg.test(str)
}
/* 匹配全空格 */
export function validateAllBlank(str) {
 const reg = /^\s+$/gi
 return reg.test(str)
}


相关资讯

  • 教你sql server突破编辑200行限制,到1000行2000行

    sql server默认的编辑行数限制是200,如果我们想编辑1000行,怎么设置呢?我们可以按照一下步骤去设置就可以了工具-->选项-->sql server对象资源管理器-->命令-->将编辑前xxx行设定0如果还是不懂,可以按照以下图片去进行设置

    2021/2/22 21:39:26
  • Sql Server查询2两个时间间隔的天数、秒数、分数、小时数

    我们经常在查询数据时需要近7天,近1个月,近1年的数据,需要用到datediff函数,具体使用如下所示:select datediff(year, 开始日期,结束日期); --两日期间隔年select datediff(quarter, 开始日期,结束日期); --两日期间隔季select datediff(month, 开始日期,结束日期); …

    2021/2/22 21:14:46