Storage 使用
生活随笔
收集整理的這篇文章主要介紹了
Storage 使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
關于web項目數據存儲
- 1. 存儲種類
- 2. localStorage/sessionStorage
- 2.1 概念
- 2.2 api的使用
- 3. 學生curd測試localStorage
針對客戶端存儲講 ——storage
1. 存儲種類
1. 分為服務器端和客戶端的存儲 2. 服務器端:1. 內存存儲(臨時)application session request pageContext2. redis緩存,隊列,16w次每秒,可持久化,可緩存3. 數據庫持久化 mysql(23秒每次) mssqlserver oracle db2... 3. 客戶端:1. cookie以文件的形式明文存儲數據,不安全,最大存儲單個數據4kb2. storage: 存儲功能,相當于小型的數據庫.(存儲功能是在瀏覽器中)"永久保存": 只要不對瀏覽器進行清理,本地存儲會永久保存數據.2. localStorage/sessionStorage
2.1 概念
使用HTML5可以在本地存儲用戶的瀏覽數據。早些時候,本地存儲使用的是 cookie。但是Web存儲需要更加的安全與快速。這些數據不會被保存在服務器,只用于用戶請求網站數據情況。可以存儲大量的數據,而不影響網站的性能。數據以 鍵/值 對存在,web網站的數據只允許該網頁訪問使用。只能存儲String類型key:Stringvalue:Object1.本地存儲器2.會話存儲器(屬于本地存儲器)區別:localStorage 和 sessionStorage 生命周期不同localStorage永久有效sessionStorage跟會話有關實際開發中發現跟會話沒有關系,當瀏覽器關閉之后,失效2.2 api的使用
1、存儲:localStorage.setItem(key,value)如果key存在時,更新value2、獲取:localStorage.getItem(key)如果key不存在返回null3、刪除:localStorage.removeItem(key)一旦刪除,key對應的數據將會全部刪除4、全部清除:localStorage.clear()某些時候使用removeItem逐個刪除太麻煩,可以使用clear,執行的后果是會清除所有localStorage對象保存的數據5、遍歷localStorage存儲的key.length 數據總量,例:localStorage.length.key(index) 獲取key,例:var key=localStorage.key(index);6、存儲JSON格式數據JSON.stringify(data) 將一個對象轉換成JSON格式的數據串,返回轉換后的串JSON.parse(data) 將數據解析成對象,返回解析后的對象備注:localStorage存數的數據是不能跨瀏覽器共用的,一個瀏覽器只能讀取各自瀏覽器的數據,儲存空間5M。3. 學生curd測試localStorage
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>學生利用localStorage curd</title><script type="text/javascript" src="../js/jquery-3.4.1.js" ></script><script>function save_stu() {if (window.Storage) {// 瀏覽器支持本地存儲// 學生集合字符串var stuListStr = localStorage.getItem("stuList");// 學生json集合對象var stuList;// 學生為空if (!stuListStr) {stuListStr = "[]";} // 轉換json對象stuList = JSON.parse(stuListStr);// 取到學生var name = $("#name").val();var age = $("#age").val();var gender = $("#gender").val();var stu = {"name":name, "age":age, "gender":gender};// 修改并 保存學生!!!var index = $("#stuId").val();if (index) {// 修改stuList[index] = stu;$("#stuId").val("");} else {// 新增到集合stuList.push(stu); }// 轉換為字符串stuList = JSON.stringify(stuList);// 保存到storagelocalStorage.setItem("stuList", stuList);// 清空文本框$("#name").val("");$("#age").val("");$("#gender").val("");// 查詢query_stu();}}function query_stu() {// 清空表格$("table tr:gt(0)").remove();// console.log(!localStorage.hasOwnProperty("stuList"));if (!localStorage.hasOwnProperty("stuList"))return;// 把Storage中的數據綁定到 表格if (window.Storage) {var stuListStr = localStorage.getItem("stuList");var stuList = JSON.parse(stuListStr);for (var i = 0; i < stuList.length; i++) {var stu = stuList[i];var tr = "<tr> <td>" + i + "</td> "+ "<td>" + stu.name + "</td> " + "<td>" + stu.age + "</td>" + "<td>" + stu.gender + "</td> "+ "<td>" + "<button οnclick='edit_stu(" + i + ")'>修改</button>" + "<button οnclick='del_stu(" + i + ")'>刪除</button>"+ "</td>"+ " </tr>";$("table:eq(0)").append(tr);}}}function edit_stu(index) {// stu json objectvar stu = JSON.parse(localStorage.getItem("stuList"))[index];console.log(stu);// 賦值$("#name").val(stu.name);$("#age").val(stu.age);$("#gender").val(stu.gender); // 賦值id 隱藏$("#stuId").val(index);}function del_stu(index) {var stuListStr = localStorage.getItem("stuList");// console.log(stuListStr);var stuList = JSON.parse(stuListStr);// 從index開始刪除一位stuList.splice(index, 1);// 刪除本地儲存..localStorage.removeItem("stuList");// 再保存..localStorage.setItem("stuList", JSON.stringify(stuList));query_stu();}</script></head><body><table><tr><td>id</td><td>name</td><td>age</td><td>gender</td><td>操作</td></tr></table><br /><input type="hidden" id="stuId" /><input type="text" id="name" /><input type="text" id="age" /><input type="text" id="gender" /><br /><input type="button" value="保存" onclick="save_stu()" /><!--<input type="button" onclick="edit_stu()" />--><input type="button" value="查詢" onclick="query_stu()" /><input type="button" value="刪除所有" onclick="localStorage.removeItem('stuList');" /></body> </html>
…
總結
以上是生活随笔為你收集整理的Storage 使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ISO-国际标准化组织
- 下一篇: 数据集获取方式和数据加强方式